一、相关网站地址

Sass官网：http://sass-lang.com/；
Sass中文网：https://www.sass.hk/；
Sass入门指南：http://www.w3cplus.com/sassguide/。

二、关于Sass

1. 定义

CSS并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决CSS的不足，开发者们想到了编写一种对CSS进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成CSS供浏览识别，这样一定程度上弥补了CSS的不足，也无需一种新的语言来代替CSS以供浏览器识别。于是CSS预处理语言SASS（Syntactically Awesome StyleSheets）就应运而生了。
Sass在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，以更少的代码实现同样的效果，而且代码的整洁度、可读性更强。
作为CSS预处理器，不仅仅只有Sass一种，主流的还有LESS和Stylus。但是Sass在三者中的历史最久，功能大而全，也吸收其他两者的优点，而且由于Scss完全向下兼容普通的CSS代码，Sass的使用者比例更高一些。
大体来说，使用Sass分3步：

• 安装Sass；
• 编译Sass文件成CSS文件；
• 在项目中引用CSS文件的路径；

2. 文件格式

Sass有两种后缀名文件：.sass和.scss。在同一个项目中，两种格式文件可以共存（不建议，最好统一为一种格式），但二者有各自的特点：

• .sass后缀的文件：使用类Ruby的语法，格式为空格缩进式，没有花括号，靠换行区分不同属性，格式要求比较严格。
• .scss后缀的文件：Sass3引入的新语法，基本写法与CSS大致相同，更易于学习。

三、安装

Sass是基于Ruby编写，所以安装Sass分2步：先安装Ruby的环境，再安装Sass。

1. Ruby安装

• Window去Ruby官网http://rubyinstaller.org/downloads下载相应版本（注:mac下自带Ruby无需再安装Ruby!）

ruby下载

• 安装的时候，选中Add Ruby executables to your PATH这个选项（不选中，就会出现编译时找不到Ruby环境的情况）

image.png

• 完成后测试Ruby是否安装成功，命令行输入以下命令

ruby -v  
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

2. Sass安装

• 安装ruby成功之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

image.png

• 然后直接在命令行中输入

gem install sass    #安装

• 按回车键确认，等待一段时间就会提示你sass安装成功。如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略

3. 淘宝RubyGems镜像安装

通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，检查更换成功后再执行gem install sass，最后查看版本。
常用命令：安装 gem install sass；查看Sass版本 sass –v；更新Sass版本 gem update sass；卸载（删除）Sass gem uninstall sass

gem sources --remove  #移除自带源
gem sources –a https://gems.ruby-china.org/  #安装RubyChina的源
gem sources –l   #查看当前的源
gem install sass    #安装
sass –v      #查看当前的版本

四、编译

Sass编译方式大概有三种：命令行编译（基础方法），GUI可视化图形编译及自动化编译

1. 命令编译

• 单文件转换命令

sass style.scss style.css
#把名为style的Sass文件转换为CSS文件。
#文件每次有更新保存之后，都需要执行这个命令。

Sass 提供4种编译风格

sass --style nested style.sass style.css       #嵌套缩进的css代码，它是默认值
sass --style expanded style.sass style.css     #没有缩进的、扩展的css代码。
sass --style compact style.sass style.css      #简洁格式的css代码
sass --style compressed style.sass style.css   #压缩后的css代码。

• 单文件监听命令（添加--watch命令）

sass --watch style.scss:style.css
#  --watch 参数加上之后，可以监测style这个文件的变化，更新保存后自动编译。

• 多文件（文件夹）监听命令

sass --watch sass/main:dist/css
#监视sass目录下main文件夹中的所有Sass文件，自动编译为CSS文件之后，放到dist/css目录下。

2. GUI编译工具

对于 GUI 界面编译工具，目前较为流行的主要有：Koala ( http://koala-app.com/ )，Compass.app（http://compass.kkbox.com/），Scout（http://mhs.github.io/scout-app/），CodeKit（https://incident57.com/codekit/index.html），Prepros（https://prepros.io/），推荐使用Koala或CodeKit

3. 自动化编译

可以通过webstorm、Sublime等编辑器的相关插件实现，也可以借助Grunt、Gulp等自动化构建工具来配置。以下为配置webstorm中的Sass，其他这里不研究。
在webstorm中settings中搜索file watchers工具，在此工具中添加一个SCSS的watcher，按照下图设置各项。点击ok，这样webstorm中Scss就配置好了。

配置scss

同样的再添加Sass的watcher，按照下图设置各项

配置sass

五、基本用法及常用语法（注：以下有关案例都是.scss文件的编写格式）

1. 导入Sass文件

@import命令，用来插入外部文件，使用Sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀（见下图）, Sass的@import也支持导入CSS文件。那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。如果导入CSS文件，则必须写.css后缀。

@import ‘partial’;   //导入名为“partial.scss”的文件
@import ‘toolbar.css’;  //导入名为“toolbar.css”的文件

2. 注释

Sass注释包括三中注释风格：// 注释 、/* 注释 */ 、/*! 注释 */

• // 注释：单行注释（也称静默注释），编译后消失，只存在Sass文件中。
• /* 注释 */：标准CSS注释，会保留到编译后的文件中。
• /*! 注释 */：重要注释，即使是压缩模式编译，也会保留此注释，常用于声明版权信息。

3. SassScript

在CSS属性的基础上Sass提供了一些名为 SassScript的新功能。SassScript可作用于任何属性，允许属性使用变量、算数运算等额外功能。
3.1 变量
变量定义以$ 开头，赋值方法与CSS属性的写法一样，默认变量，在值后面加入!default即可。

$width: 5em;
$width: 10rem !default;
#main {
  width: $width;
}
//编译后
#main { 
  width: 5em; 
}

变量调用还有另外一种方式：这种方式是将变量嵌套在字符串中，使用#{}

$left: left;
body {
  margin-#{$left}: 10px;
}
//编译后
body {
  margin-left: 10px;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量添加 !global 即可。

#main {
  $width: 5em  !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//编译后
#main { 
  width: 5em; 
}
 #sidebar { 
  width: 5em; 
}

3.2 数据类型
SassScript支持6种主要的数据类型：

• 数字：1, 2, 13, 10px
• 字符串：有引号字符串和无引号字符串，“foo”,‘bar’,baz
• 颜色：red，#cc6699，#888，rgba(255,255,255,0.5)
• 布尔型：true，false
• 空值：null
• 数组（list）：用空格或者逗号做分割符，10px 15px 0 0，(5px 10px) (20px 30px)
• maps：相当于JavaScript的object，(key1: value1, key2: value2)

3.3 运算
Sass具有运算的特性，支持加减乘除及取整运算 +, -, *, /, %，关系运算 <, >, <=, >= ，相等运算 ==, != 等, 注意运算符前后各留一个空格。

$colsNum：12;          //列的个数
$colsWidth: 60px;       //一列的宽度
$gap: 5px;             //列之间的间隙
$rowWidth: $colsNum * $colsWidth + ($colsNum – 1) * $gap;     //一行的总宽度
.row {
  width: $rowWidth;
}
//编译后
.row {
  width: 775px;
}

4. 嵌套

Sass支持选择器及属性嵌套，可以避免代码的重复书写。
4.1 选择器嵌套
由于CSS是从右向左解析，层级过多影响浏览器引擎解析效率，所以尽量避免嵌套层级过多，一般推荐嵌套不超过三层。

div {
  h1 {
    color：#333;
  }
  p {
      margin-bottom: 14px;
    a {
        color: #999;
    }
   }
}
//编译后
div h1 { color: #333;}
div p { margin-bottom: 14px;}
div p a { color: #999;}

大多数情况下上面那种简单的嵌套都没问题。但如果要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符
4.2 属性嵌套

div {
    border: {
    style: solid;
        width: 1px;
        color: #ccc;
    }
}
//编译后
div {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

div {
    border: 1px solid #ccc {
      left：0;
      right: 0;
    }
}
//编译后
div {
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
}

5. 继承

Sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

.class1 {
    border: 1px solid #333;
}
.class2 {
    @extend .class1;
    background-color: #999;
}
//编译后
.class1, .class2 {
    border: 1px solid #333;
}
.class2 {
    bakground-color：#999;
}

如上示例，.class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

.class1 {
    border: 1px solid #333;
}
.class1 a{
    color: red;
}
.class2 {
    @extend .class1;
}

//编译后

.class1, .class2 {
    border: 1px solid #333;
}
.class1 a, .class2 a{
    color: red;
}

6. Mixin

Sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过 @include+mixin名称来调用。

• 无参数mixin声明及调用：

@mixin mixName {
    float: left;
    margin-left: 10px;
}
div {
    @include mixName;
}
//编译后
div {
    float: left;
    margin-left: 10px;
}

• 带参数mixin声明及调用
  可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。

@mixin left($value: 10px){
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}
//编译后
div {
    float: left;
    margin-left: 66px;
}

• 带多组数值参数的mixin声明及调用

@mixin rounded($vert,$horz,$radius: 10px){
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius -#{$vert}#{$horz}: $radius;
    -webkit- border-#{$vert}-#{$horz}-radius: $radius;
}
#nav li {
    @include rounded(top,left);
}
#footer {
    @include rounded(top,left,5px);
}
//编译后
#nav li{
    border-top-left-radius: 10px;
    -moz-border-radius -topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
#footer {
    border-top-left-radius: 5px;
    -moz-border-radius -topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

7. 颜色函数

7.1 RGB颜色函数

• rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
• rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
• red($color)：从一个颜色中获取其中红色值；
• green($color)：从一个颜色中获取其中绿色值；
• blue($color)：从一个颜色中获取其中蓝色值；
• mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

7.2 HSL颜色函数

• hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
• hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
• hue($color)：从一个颜色中获取色相（hue）值；
• saturation($color)：从一个颜色中获取饱和度（saturation）值；
• lightness($color)：从一个颜色中获取亮度（lightness）值；
• adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
• lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
• darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
• saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
• desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
• grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
• complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
• invert($color)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

7.3 Opacity 函数

• alpha($color) / opacity($color)：获取颜色的alpha分量（不透明度）；
• rgba($color, $alpha)：更改颜色透明度；
• opacify($color, $amount) / fade-in($color, $amount)：让颜色更不透明；
• transparentize($color, $amount) / fade-out($color, $amount)：让颜色更透明。

7.4 其他颜色函数

• adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：增加或减少一个或多个颜色成分；
• scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])：流畅颜色的一个或多个属性；
• change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：改变颜色的一个或多个属性；
• ie-hex-str($color)：将颜色转化为IE识别的格式。

lighten(#cc3, 10%)  // #d6d65c   变亮
darken(#c33, 10%)   // #a3a329   变暗
grayscale(#cc3)     // #808080  变灰
complement(#cc3)    // #33c     补充色

六、高级用法

1. 条件语句

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码，@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
$type: warning;
.msg {
    @if type == success {
        color: green;
} @else if type == warning {
    color: yellow;
} @else if type ==danger {
    color: red;
} @else {
    color: black;
}
}
//编译为
p {
    border: 1px solid; }
.msg {
    color: yellow; }

三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值

a {
    color: if(true, red, black);
    font-size: if(false, 12px, 16px);
}
//编译后
a {
color: red; 
font-size: 16px; }

2. 循环语句

2.1 @for
这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与to的含义：当使用through时，条件范围包含 <start> 与 <end> 的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var可以是任何变量，比如$i；<start>和<end>必须是整数值

@for $i from 1 to 3 {
  .item-#{$i} {width: 2rem * $i}
}
@for $i from 1 through 3 {
  .tab-#{$i} {width: 2rem * $i;}
}
//编译为
.item-1 {
  width: 2rem; }
.item-2 {
  width: 4rem; }
.tab-1 {
  width: 2rem; }
.tab-2 {
  width: 4rem; }
.tab-3 {
  width: 6rem; }

2.2 @while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如

$i: 6;
@while $i>0 {
  .item-#{$i} {width: 2rem * $i;}
  $i: $i – 2;
}
//编译为
.item-6 {
  width: 12rem; }
.item-4 {
  width: 8rem; }
.item-2 {
  width: 4rem; }

2.3 @each
这个指令的格式是@each $var in <list>, $var 可以是任何变量名，比如 $length或者 $name，而 <list> 是一连串的值，也就是值列表

• 单字段list数据循环

@each $animal in tiger, lion, monkey, elephant {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译为
.tiger-icon {
  background-image: url('/images/tiger.png'); }
.lion-icon {
  background-image: url('/images/lion.png'); }
.monkey-icon {
  background-image: url('/images/monkey.png'); }
.elephant-icon {
  background-image: url('/images/elephant.png'); }

• 多字段list数据循环

$fruit-data: (apple, red, default),(lemon, yellow, pointer);
@each $fruit, $color, $cursor in $fruit-data {
  #{fruit}-icon {
    background-image: url('/images/#{$fruit }.png');
    color: $color;
    cursor: $cursor;
  }
}
//编译为
.apple-icon {
  background-image: url('/images/apple.png');
  color: red;
  cursor: default; }
.lemon-icon {
  background-image: url('/images/lemon.png');
  color: yellow;
  cursor: pointer; }

• 多字段map数据循环

$headings: (h1: 2rem, h2: 1.5rem, h3: 1.2rem);
@each $header, $size in $headings {
    #{$header}: {
    font-size: $size;
  }
}
//编译为
h1 {
  font-size: 2rem; }
h2 {
  font-size: 1.5rem; }
h3 {
  font-size: 1.2rem; }

3. 自定义函数

Sass定义了很多内置函数，如上边提到的颜色函数，同时也支持自定义函数，以@function开始。

$grid-width: 40px; 
$gutter-width: 10px;
@function grid-width($n) { 
  @return $n * $grid-width + ($n - 1) * $gutter-width; 
} 
#sidebar { 
  width: grid-width(5); //或者写成 width: grid-width($n: 5)
}
//编译为
#sidebar {
  width: 240px; }