SASS的几种编译方式

 本文主要介绍SASS的几种编译方式

   简要：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装ruby（http://www.ruby-lang.org/zh_cn/downloads/）然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

   gem install sass

然后,就可以使用了。

 一、命令行方式

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为nav。）

 

   

然后打开命令行  输入  sass nav.scss nav.css  即可将nav.scss 编译成 nav.css

  

 

 

此外 SASS提供四个编译风格的选项:

　　* nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

生产环境当中，一般使用压缩选项。

　　sass --style compressed nav.sass nav.css

 

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

sass --watch nav.scss:nav.css

 

二、软件方式编译（Koala)

软件地址（https://github.com/oklai/koala/releases/）

 

 

 

 

下载安装好软件后把scss 文件导入软件后即可执行编译;

　

 

 

三、在webstorm中配置sass的自动编译（较实用方便）

 

 

 点击左上角的File-->Settings--> File Watchers

在弹窗的右上角点击绿色的“+”号，然后选择SCSS;

 

 

Arguments:

可以配置编译后的文件的输出路径,我这里写的是:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

(编译后的 nav.css 存放路径)

Output paths to refresh:

改成这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

(编译后的 nav.css.map 存放路径)

 

文中nav.scss:    https://github.com/Thinkia/SASS/blob/master/Test/tModel-P/sass/nav.scss

SASS更多用法：阮一峰SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html