阅读目录
一. Sass安装
二. Sass基本用法
三. Sass编程
Sass被称为“CSS预处理器”，就是用一种编程的思想去写CSS样式表。在还没接触Sass的时候，很多人都不愿意去了解，认为都会了CSS，为什么还要去写Sass，Sass最终生成的还是CSS文件呀。
最初，我也是这么认为的。
在我认真的学了Sass之后，原来使用Sass对CSS有很大的帮助，对于经常性写CSS文件的设计师们，节省了很多的开发时间，并且可以写出扩展性更强、更易于维护的代码。下面是我记录了Sass的学习笔记。
一. sass安装
1.1 Ruby安装
主要针对的是window系统下的安装，因为Sass依赖于Ruby环境，所以应先安装Ruby，Ruby安装包下载链接：http://rubyinstaller.org/downloads/
下载之后，安装过程中，请勾选Add Ruby executables to your PATH，添加环境变量。
如果没有勾选，需在安装完成之后配置Ruby环境变量。
在window系统中，新建系统变量RUBY_HOME，存放Ruby安装路径（D:Program FilesRuby23-x64）。
在系统变量Path中，添加Ruby运行环境路径（%RUBY_HOME%in），Ruby环境变量配置完成。
1.2 运行gem命令
安装完成之后，在开始菜单中找到Ruby，打开Start Command Prompt with Ruby，输入ruby -v，如果显示ruby的版本信息，表示安装成功。
1.3 安装sass
A. 安装方法一：原配置源安装
在命令行中直接输入gem install sass，按回车键即可。等待一段时间会提示安装成功。（因为国内网络原因，估计会安装不成功，所以可以FQ或者选择下面淘宝镜像安装）
安装Sass测试版本 gem install sass –pre
升级Sass版本 gem update sass
查看Sass版本 sass –v
帮助命令行 sass -h
B. 安装方法二：淘宝镜像安装
首先移除默认的配置源（https://rubygems.org/），然后添加淘宝镜像的配置源（https://ruby.taobao.org/），在命令行中输入
gem source --remove https://rubygems.org/
gem source --add https://ruby.taobao.org/
输入gem source查看当前的源是否为淘宝镜像配置源，如果为淘宝源，再输入gem install sass，等待一段时间，会提示安装成功。
C. 安装方法三：本地安装
还可以选择本地安装，需要在网上找到Sass的gem文件，下载链接：https://rubygems.org/gems/sass
下载之后，存放在任意位置，在命令行中输入gem install E://sass-3.4.22.gem，安装路径，根据自己存放的路径填写。
二. Sass基本用法
2.1 导入
我们都知道CSS文件，都有导入功能，@import ‘reset.css’，但是在建站方面，这种导入效果和页面分别link两个CSS文件样式表的效果是一样的，因为HTTP请求的数目并不会减少。
在Sass中，也有导入功能，如果导入的是CSS文件，@import ‘reset.css’，那效果和CSS文件导入效果是一样的，它还是以@import存在，并不会合并到编译后的CSS文件中。Sass导入可以省略.scss后缀名，如果以@import ‘reset’方式导入，会合并到编译后的CSS文件。一般需要导入的Sass文件是以_开头命名，如_reset.scss，导入只要引入reset即可。
被导入Sass文件，_a.scss：
$fontSize: 12px;需要导入样式的Sass文件，b.scss：
@import 'a'; body { font-size: $fontSize; }
编译后的CSS样式：
body { font-size: 12px; }
2.2 注释
Sass文件添加注释有两种方式：
/* 这是注释 */
这种方式和CSS文件中的注释是一样的。如果在压缩模式下使用这种注释方式，那么在最终生产的CSS文件中注释将会被删除。但如果不用压缩输出方式，注释将保留在CSS文件中。
// 这是注释
Sass有可以用两条正斜杠表示单行注释，这和JavaScript、Java文件的单行注释方式相同。这种方式的注释，不会显示在输出的CSS文件中。
2.3 变量
Sass中定义变量的语法是：美元符号、变量名、冒号、变量值。
A.普通变量 $variable-name: value;
$colorMain: orange; a { color: $colorMain; }
编译后的CSS样式：
a { color: orange; }
B.默认变量 $variable-name: value !default;
$fontSize: 13px !default; body { font-size: $fontSize; }
编译后的CSS样式：
body { font-size: 13px; }
如果需要改变默认变量，在默认变量前面，重新赋值即可。（！default标识告诉Sass，只有在没有其他值赋值的情况下才使用默认值。）
$fontSize: 12px; $fontSize: 13px !default; body { font-size: $fontSize; }
编译后的CSS样式：
body { font-size: 12px; }
C.多值变量 $variable-name: value1 value2 value3;
Sass可以定义多值变量， 多值变量可以分为list类型和map类型，对应于JavaScript的数组和对象。
list类型变量，是以空格，逗号或者括号来分割多个值，可用nth($list, n)函数来取值。
$colorLink: #222 $colorMain; //第一个为默认颜色值，第二个为鼠标滑过颜色值 a { color: nth($colorLink, 1); &:hover { color: nth($colorLink, 2); } }
编译后的CSS样式：
a { color: #222; } a:hover { color: orange; }
上面这部分类似为一维数组的定义和使用，下面为多维数组：
$px: 20px 15px, 15px 20px; //二维数组或者用括号来分割：
$px: (20px 15px) (15px 20px); //二维数组
map类型变量，是以key-value成对定义的，其中value值又可以为普通变量或者list变量。格式为：$map(key1: value1, key2: value2, key3: value3)，可用map-get($map, $key)来取值。
$heading: (h1: 20px, h2: 16px, h3: 13px); body { font-size: map-get($heading, h3); }
编译后的CSS样式：
body { font-size: 13px; }
2.4 嵌套
嵌套语法是：选择器，左大括号，属性-值对，右大括号。在多值变量的时候，我们用到了一个&这样的符号，指的是父元素选择器，在嵌套伪选择器的时候经常用到。（在使用嵌套的时候要注意，尽量不要超过三层。）
div { background: $colorMain; a { color: #fff;
text-decoration: none; &:hover, &:active { text-decoration: underline; } } }
编译后的CSS样式：
div { background: orange; } div a { color: #fff; text-decoration: none; } div a:hover, div a:active { text-decoration: underline; }
在上面我们讲述的是选择器的嵌套，在Sass中，还有一种属性嵌套：
.div { background: { image: url("img/img_01.png"); repeat: no-repeat; position: center; } border: { style: solid; color: $colorMain; left: { 5px; } right: { width: 2px; } } }
编译后的CSS样式：
.div { background-image: url("img/img_01.png"); background-repeat: no-repeat; background-position: center; border-style: solid; border-color: orange; border-left-width: 5px; border-right-width: 2px; }
注意：属性嵌套书写时，一定不要忘了属性后面所跟的冒号：。在对div的背景定义上，其实背景直接可以写为background: url(“img/img_01.png”) no-repeat center，不用像上面那么麻烦，所以在写样式的时候，也要注意减少不必要的麻烦。
2.5 继承
使用@extend命令可让任何元素继承其他样式定义好的属性和值。如果有好几个元素有共同的样式属性，这种情况可使用@extend命令。
.div { background: $colorMain; padding: 20px; } .div-01 { @extend .div; border: 2px solid #eee; } .div-02 { @extend .div; border: 2px solid #ccc; }
编译后的CSS样式：
.div, .div-01, .div-02 { background: orange; padding: 20px; } .div-01 { border: 2px solid #eee; } .div-02 { border: 2px solid #ccc; }
2.6 占位符
占位符与继承@extend命令一起使用，有些情况下，一些代码只是用来做扩展用，就可以用占位符选择器，以此来减少冗余代码。以继承的例子来，只需将开头的.div换为%div即可。这样在生成的CSS文件中就不会有.div的样式。
%div { background: $colorMain; padding: 20px; } .div-01 { @extend %div; border: 2px solid #eee; } .div-02 { @extend %div; border: 2px solid #ccc; }
编译后的CSS样式：
.div-01, .div-02 { background: orange; padding: 20px; } .div-01 { border: 2px solid #eee; } .div-02 { border: 2px solid #ccc; }
2.7 混合宏
混合宏以@mixin命令声明，基本语法是：@mixin mixin-name($parameter) {…: $parameter}，混合宏既可以不传递参数，也可以有参数，并且可以是单个，也可以有多个参数。Compass提供了许多现成的混合宏。
A.无参数混合宏
无参数混合宏相当于继承，可以直接用继承代替。
@mixin center-block { margin-left: auto; margin-right: auto; } .div { @include center-block; }
编译后的CSS样式：
.div { margin-left: auto; margin-right: auto; }
B.有参数的混合宏
以圆角为例（通常在定义混合宏的参数时，都会设定一个默认值，当然，也可以不设定。）：
@mixin border-radius($radius: 4px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; -o-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .div { @include border-radius(5px); }
编译后的CSS样式：
.div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
C.多个参数混合宏
对于#{$direction}，可能有点陌生，这是变量的一种特殊使用方法，在字符串中使用，用#{}包含变量。
@mixin border-direction-radius($direction: top-left, $radius: 4px) { -moz-border-#{$direction}-radius: $radius; -webkit-border-#{$direction}-radius: $radius; -o-border-#{$direction}-radius: $radius; -ms-border-#{$direction}-radius: $radius; border-#{$direction}-radius: $radius; } .div { @include border-direction-radius(top-left, 5px) }
编译后的CSS样式：
.div {-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; border-top-left-radius: 5px; }
D.多组值参数
如果一个参数可以有多组值，如box-shadow，transition等，那么参数则需要在变量后加三个点表示，如：$variables… 。以box-shadow为例，box-shadow: h-shadow v-shadow blur spread color inset，都指的是box-shadow: 水平偏量 垂直偏量 模糊值 阴影扩散值 阴影的颜色 inset值。
@mixin box-shadow ($shadow...){ -moz-box-shadow: $shadow; -webkit-box-shadow: $shadow; -o-box-shadow: $shadow; -ms-box-shadow: $shadow; box-shadow: $shadow; } .div { @include box-shadow(1px 1px 2px 0px gray, 0px 1px 0px 1px lighten(gray, 0.5)); }
编译后的CSS样式：
.div { -moz-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -webkit-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -o-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -ms-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; }
三. Sass编程
3.1 数学计算
Sass可进行加、减、乘、除计算。注意，进行计算时，数值的单位必须一致，并且运算符号最好两边都有一个空格，以免计算出错。
A.加法
$widthContainer: 1200px; $widthLeft: 20%; $widthRight: 80%; .div { width: $widthLeft + $widthRight; }
编译后的CSS样式：
.div { width: 100%; }
B.减法
.div { width: $widthRight - $widthLeft; }
编译后的CSS样式：
.div { width: 60%; }
C.乘法
在计算乘法的时候要注意，当相乘时，如果值后面都带单位，会出现问题。
.addition { width: 20px * 40px; }
编译时，报错：
800px*px isn't a valid CSS value.如果只给一个值带单位，就正常了
.addition { width: 20 * 40px; }
编译后的CSS样式：
.addition { width: 800px; }
D.除法
在计算除法的时候，跟乘法一样，只需要一个值带单位即可，并且表达式放在括号内，才能正常使用。
.addition { width: 80% / 20%; }
对此，编译之后，在CSS中，是没有意义的
.addition { width: 80% / 20%; }
如果使用括号：
.addition { width: (80% / 20); }
编译之后的CSS样式：
.addition { width: 4%; }
3.2 条件
@if和@else if控制命令，举个简单例子：
$div: left; .div { @if $div == left { float: left; }@else if $div == right { float: right; } }
编译后的CSS样式：
.div { float: left; }
3.3 循环
@for循环命令，有两种形式：@for $variable from startNum to endNum，和@for $variable from startNum through endNum，startNum表示起始值，endNum表示结束值，关键字to循环时不包括endNum这个数，through循环时包括endNum这个数。
@for $i from 1 through 3 { .div-#{$i} {
width: 100px * $i;
}
}编译后的CSS样式：
.div-1 { width: 100px; } .div-2 { width: 200px; } .div-3 { width: 300px; }
@for $variable from startNum to endNum：
@for $i from 2 to 4 { .div-#{$i} { width: 100px * $i; }
}编译后的CSS样式：
.div-2 { width: 100px; } .div-3 { width: 200px; }
@each循环命令，基本语法是：@each $variable in list/map，list/map表示list类型或者map类型变量。
A.循环list类型变量
@each $list in a,b,c { .#{$list} { background-image: url("img/#{$list}.png"); } }
编译后的CSS样式：
.a { background-image: url("img/a.png"); } .b { background-image: url("img/b.png"); } .c { background-image: url("img/c.png"); }
多组值的循环：
$listData: (a, no-repeat, left top) (b, no-repeat, left bottom); @each $name, $repeatType, $sizeType in $listData { .#{$name} { background-image: url("img/#{$name}.png"); background-repeat: $repeatType; background-position: $sizeType; } }
编译后的CSS样式：
.a { background-image: url("img/a.png"); background-repeat: no-repeat; background-position: left top; } .b { background-image: url("img/b.png"); background-repeat: no-repeat; background-position: left bottom; }
B.循环map类型变量
$headings: (h1: 20px, h2: 16px, h3: 13px); @each $header, $size in $headings { #{$header} { font-size: $size; } }
编译后的CSS文件：
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 13px; }
3.4函数
Sass提供了好多现成的函数，我们也可以自己定义函数，用@function命令定义函数，@return定义函数返回值。
@function func() { @return 13px; } body { font-size: func(); }
编译之后的CSS样式：
body { font-size: 13px; }
相关链接：Sass关于颜色函数的乐趣