什么是sass？
-
CSS不是编程语言，但是利用它可以进行网页开发，但是没法用它进行编程。sass的出现弥补了它的不足，让css可以通过编程来实现。
-
sass扩展了css3，增加了规则，变量，混入，选择器，继承等特性，可以生成风格良好的css样式表，易于管理和维护。
-
sass官网:http://sass-lang.com/
环境变量搭建和编译指令
- 安装ruby
sass依赖于ruby环境，所以必须先搭建ruby。
下载地址： http://rubyinstaller.org/downloads
安装时记得勾选Add Ruby executables to your PATH选项，添加环境变量。 - 安装sass
- 安装ruby后，在目录中找到ruby，打开Start Command Prompt with Ruby，然后直接在命令行中输入命令: gem install sass.按Enter键确认安装sass。
- ** 如果没有安装成功的话，建议更换gem的软件源地址**
1、查看gem的源地址：gem source -l；
2、 删除原来的源 gem sources --remove https://rubygems.org/
3、添加新的软件源 gem sources -a http://gems.ruby-china.org/
4、查看gem软件源 的地址 gem sources -l 如果更改成功(确保current sources 中只有一个http://gems.ruby-china.org/，然后执行第5步命令
5、gem install sass
Gem 是什么？
- ruby软件包管理系统
注：如果你系统不支持https，请将软件源更换成：gem sources -a http://gems.ruby-china.org/
查看sass版本：sass -v
升级sass版本：gem update sass**
sass编译命令
1、单文件转换命令：sass style.scss style.css/
2、单文件监听命令：sass --watch style.scss:style.css
3、文件夹监听命令：sass --watch sass:css
4、sass --style compressed --sourcemap=none --watch sass:css
命令行其他配置选项：
1、 --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
2、–sourcemap表示开启sourcemap调试。开启sourcemap调试，会生成一个后缀名为.css.map文件。–sourcemap=none禁止输出该文件。
sass --style compressed --sourcemap=none --watch sass:css
sass的变量定义和注释
-
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值
-
普通变量：定义之后可以在全局范围内使用。
默认变量：仅需要在值后面加上!default即可. -
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。
-
特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
-
全局变量：在变量值后面加上!global即为全局变量。在sass 3.4后的版本中正式应用
-
多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
a、list类型：可通过空格，逗号或小括号分隔多个值。
b、map类型：以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。
注释：
- sass提供了三种注释方式：
1、多行注释：在编译输出的CSS文件中会保留，压缩输出格式中不会保留，注释方式：/* 注释内容*/
2、单行注释：在输出CSS文件时不保留。注释方式：//注释内容 //
3、 强制注释：在多行注释的开头，添加感叹号!表示强制保留。注释方式：/!注释内容/
Sass注释中文报错问题：
- 找到ruby的安装目录，里面有sass模块，如这个路径：C:\Ruby23\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib。
- 在这个文件里面sass.rb，添加一行代码：Encoding.default_external = Encoding.find(‘utf-8’)。放在所有的require XXXX 之后即可。（注释在css文件中不保留）
运算符：
- sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。