写在前面的话：随着CSS文件越来越大，内容越来越复杂，对其进行很好的维护将变的很困难。这时CSS预处理器就能够帮上大忙了，它们往往拥有变量、嵌套、继承等许多CSS不具备的特性。有很多CSS预处理器，这里总结Sass的使用方法。

======正文开始======

我们可以通过一种类似css的编程语言编写代码，保存为.scss后缀名的文件，然后使用Sass进行处理为css文件，而这种.scss文件中可以有变量、嵌套等功能，有些编程的味道,Sass简单介绍看这里：Sass；同时.scss文件也能够通过Sass处理为压缩的、缩进的等不同风格的css代码，方便后期的部署。下面是我的一些学习总结。

一、环境布置

1.安装rubby：

　　Sass是用ruby写的，需要ruby的运行环境，从以下链接下载rubyinstaller进行安装（windows）：http://rubyinstaller.org/

2.安装Sass

安装完成ruby后，接下来安装Sass。由于国内ruby源现在被墙，通过下面方式进行安装SASS，打开cmd命令行。

（1）移除原有的ruby源地址

gem sources –remove https://rubygems.org/

（2）新增可用的ruby源地址

gem sources -a https://ruby.taobao.org

（3） 安装Sass

gem install sass

（4）sublime支持scss文件高亮显示

借助package control安装sass插件，之后set syntax为sass即可。

（5）防止Sass中文注释乱码

后续写.scss代码过程中中文注释会有乱码的情况，找到engine.rb文件（一般位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目录下面），在所有的require后面新增如下代码：

Encoding.default_external = Encoding.find(‘utf-8’)

至此，Sass环境部署完成。

二、编译.scss文件为css文件

　　总结具体Sass语法格式之前，先说一下如何编译.scss文件为css文件。

1.切换到.scss文件所在目录

命令行下切换到代码文件夹目录（如Z:\），假设有文件test.scss文件，里面内容如下：（SASS完全支持css语法）

2.编译scss文件为css文件

运行命令：sass –style compressed test.scss test.css，即可生成压缩版的css文件，并且命名为test.css。几点说明：

（1）–style 后面可以有四个参数可选，分别为expanded、nested、compact、compressed，分别选用不同参数的效果可以自己尝试体验。

（2）test.scss和test.css文件目录可以自定义，例如把Z盘sass目录下的test.scss文件编译为压缩版的文件，并放置在Z盘css目录下，那么命令即：sass –style compressed z:\sass\test.scss z:\css\test.css

（3）开发过程中，只需要修改scss文件，然后编译；前端页面只需要引用相应的css文件即可。

3.侦听文件和文件夹

　　如果希望某一个scss文件或者相应的文件夹下面文件修改后，自动进行编译，那么可以使用侦听命令。

（1）侦听文件：

sass –watch –style compressed test.scss:test.css

当test.scss文件有修改后，会自动编译为test.css，并且是compressed的。

（2）侦听文件夹：

sass –watch –style compressed sass:css

当sass文件夹下.scss文件有修改的时候，会自动编译为与sass中文件同名的css文件。

备注：

（1）注意源文件和目标文件之间是冒号，与编译命令中为空格不同。

（2）生成的map文件可以查找source map文件的作用。

三、Sass基本用法

下面对Sass基本的用法进行总结，SASS语法与CSS具有极高的相似度。

以下演示源代码放在test.scss文件中，编译后生成的css文件放在test.css文件中，侦听命令为：

sass –watch –style expanded sass/test.scss:css/test.css

1.变量：以$开头。

源代码：

编译后：

2.变量嵌套在字符串之中：应该以#{}包裹。

源代码：

编译后：

3.允许进行计算：

源代码：

编译后：

4.允许选择器嵌套：

源代码：