第一章：Sass简介

一、 什么是CSS预处理器

定义：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，CSS预处理器用一种专门的编程语言，进行web页面的样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程特性，无需考虑浏览器的兼容性问题。

例如：你可以在CSS中使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性强、可读性更加、更易于代码的维护。

二、什么是Sass?

Sass是一门高于CSS的元语言，它能用来清晰地、结构化的描述文件样式。有着比普通CSS更强大的功能。

Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Sass是采用Ruby语言编写的一款CSS预处理语言，它诞生于2007年，是最大的成熟的CSS预处理语言。

三、Sass早期为什么不如less普及？

虽然缩进式风格可以有效缩减代码量，强制规范代码风格，但它一方面不为大多数程序接受，另一方面无法兼容已有的CSS代码。所以远不如LESS普及

四、Sass和SCSS有什么区别？

Sass和Scss其实是一种东西，我们平时都称之为Sass，两者之间的不同之处有两点：

1、文件扩展名不同，Sass是以“.sass”后缀为扩展名，而SCSS是以‘.scss’后缀为扩展名

2、语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带（{}）和（;）,而SCSS语法书写和我们的长沙市语法书写方式非常类似。

举例：Sass语法

$font-stack:Helvetica, sans-serif  //定义变量

$primary-color:#333 //定义变量

body

font：100% $font-stack

color:$primary-color

SCSS语法

$font-stack:Helvetica, sans-serif ; //定义变量

$primary-color:#333; //定义变量

body{

font：100% $font-stack

color:$primary-color

}

编译出来的CSS

body{

　　font:100% Helvetica,sans-serif;

color:#333;

}

五、Sass/SCSS和纯CSS写法差很多吗？

Sass和CSS写法有差别：

Sass是基于Ruby写出来的，所以其延续了Ruby的书写规范。在书写时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的

SCSS和CSS写法无差别：这也是Sass后来越来越受大众喜欢的原因之一。

第二章：Sass安装环境

一、MAC 系统

1、确认是否安装Ruby

2、 打开终端命令，进入 stability下   输入 ruby -v

如果提示已经安装ruby 就可以直接进行Sass安装了

3、输入sudo gem install sass 然后回车  自动会安装

4、可以输入sass -v进行检测sass是否安装成功

5、还可以将sass下载到本地，然后输入sudo gem install +sass路径进行安装

二、windows系统

1、首先下载Ruby安装包  （官网：http://rubyinstaller.org/downloads  下载对应的Ruby版本）

2、Ruby安装文件下载好后，可以按应用软件安装步骤进行安装Ruby，建议安装在C盘下，安装过程中选择第二个选项。

3、安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command 控制面板

4、安装sass——有多种方法

1）通过命令安装Sass

打开电脑的命令终端，输入下面命令： gem install sass

2）通过Compass来安装sass

除了使用gem命令来安装Sass之外，还可以通过安装compass来安装sass。因为Compass是基于Sass开发的一个框架（里面集成了很多好写的mixins和Sass函数），也就是说，安装了Compass,也就安装好了Sass

同样在命令终端输入：sudo gem install sass

3）本地安装Sass

由于有时候直接使用上面的命令安装无法实现正常安装（网络受限原因），当碰到这种情况时需要特殊去处理，可以使用下面的方法

可以到Rubygems（官网：http://rubygems.org/）网站上将Sass的安装包（http://rubygems/sass）下载下来，然后在命令终端输入：gem install <把下载的安装包拖到这里>直接回车即可安装成功

注：在IOS系统平台，可以直接将下载的安装包拖到‘gem install’后面，如果是在Windows系统，需要手动输入安装的文件路径

4）淘宝RubyGems镜像安装 Sass

通过淘宝RubyGems 镜像安装Sass，需要通过gem source 命令来配置源，先移除默认的 https://rubygems.org源，然后添加淘宝源 https://ruby.taobao.org源

第一步：移除默认的源：gem sources --remove https://rubygems.org/

第二步：指定淘宝的源：gem sources -a https://ruby.taobao.org/

第三步: 查看指定的源是不是淘宝源：gem sources -l

确保只有ruby.taobao.org  如果无误之后，执行下面的命令：gem install sass

三、查测Sass及更新

1、查看Sass是否安装成功

输入下面命令即可：sass -v

如果终端上显示Sass 版本，说明sass安装成功，可以使用了

2、更新sass

维护sass的团队会不断的为Sass添加新的功能，那么如何确保自己已安装Sass也具有这些新功能呢，只需要输入命令：gem update sass

看到更新成功的信息，说明已经更新

四、卸载Sass

在长期使用中难免会碰到无法解决的问题，有时候需要卸载Sass，然后重新安装Sass，卸载命令：gem uninstall sass

第三章 Sass的语法格式及编译调试

一、Sass的语法格式

1、Sass的语法格式

这里说的Sass语法是Sass的最初语法格式，他是通过tab键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号，常常把这种格式成为Sass老版本，其文件名以“.sass”为扩展名

2、SCSS语法格式

SCSS是Sass的新语法格式，它和CSS一样，代码包裹在一对大括号里，并且末尾结束处都有一个分号，文件名以“scss”为扩展名

注意：“.sass”只能使用Sass老语法规则（缩进规则），“.SCSS”使用的是Sass的新语法规则，也就是SCSS语法规则（类似css语法格式）

二、 Sass编译

Sass编译有多种方法：

1、命令编译

指使用电脑中的命令终端，通过输入Sass指令来编译Sass。只需要在命令终端输入：

单文件编译：

sass  <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，如果想对整个项目所以sass文件编译成css文件，可以这样操作

多文件编译：sass sass/：css/ 此命令表示将项目中“sass”文件夹中所有“.scss”文件编译成“.css”文件，并且将这些CSS文件都放在项目中“css”文件夹中

缺点及解决办法：

在实际编译过程中，会发现上面的命令只能一次性编译，每次修改并保存文件之后，都得重新执行一次这样的命令。于是可以使用以下方法：就是在编译Sass时，开启“watch”功能，这样，只要有代码进行保存修改，都能自动检测到代码的变化，并且给你直接编译出来

sass --watch <要编译的Sass文件路径>/style.scss;<要输出CSS文件的路径>/style.css

当然，使用sass命令编译时，可以带很多的参数

watch举例：

假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且把编译出来的文件放在“css”文件中，我就可以在命令终端执行：

sass --watch

sass/bootstrap.scss:css/bootstrap.css

一旦我的bootstrsp.scss文件有任何修改，只要我重新保存了修改的文件，命令终端就能检测并重新编译出文件；

2、GUI工具编译

目前较为流行的GUI界面工具主要有：

1）Koala（http://Koala-app.com/）

2) Compass.app(http://compass.kkbox.com/)

3) Scout (http://mhs.github.io/scout-app/)

4) CodeKit (http://incident57.com/codekit/index.html)

5)Prepros(https://prepros.io/)

相比之下，推荐使用以下两个

1）Koala（http://Koala-app.com/）

2) CodeKit (http://incident57.com/codekit/index.html)

3、自动化编译

可以使用 Grunt 和Gulp 这两个东东来配置Sass的编译，不建议生搬硬套。

三、Sass常见的编译错误

在编译Sass代码时常常会碰到一些错误，让编译失败，这样的错误有系统造成的也有人为造成的，但大部分都有谁人为过失引起编译失败

最为常见的一个错误就是字符编译引起的，在Sass编译过程中不支持“GBK”编码，所以在创建Sass文件时，需要将文件编码设置为“utf-8”

另外一个错误就是路径中的中文字符引起的，建议在项目中文件命名或者文件目录命名不要使用中文字符。至于人为失误造成的编译失败，在编译过程中都会有具体的说明，可以根据编译提供的错误信息进行对应的修改

四、不同样式风格的输出方法

在Sass中编译出来的样式风格可以按不同的样式风格显示。主要包括以下几种：

1、嵌套输出方式  nested

Sass提供了一种嵌套显示CSS文件的方式。例如

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }
在编译时带上参数 --style nested 

sass D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\index.css --style nested

编译出来的CSS样式风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2、展开输出方式 expanded

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }
在编译时带上参数 --style expanded
这个输出的CSS样式风格和nested类似，只是大括号在另起一行，同样上面的代码，编译出来：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/*# sourceMappingURL=expand.css.map */

3、紧凑输出方式 compact

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }

在编译时带上参数 --style compact

该方式适合那些喜欢单行CSS样式格式的朋友，编译后的代码如下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

4、压缩输出方式 compressed

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }

在编译时带上参数 --style compressed
压缩输出方式会去掉标准的Sass和CSS注释及空格，也就是压缩好的CSS代码样式风格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
编译出来的CSS样式风格的选择完全是个人喜好问题，可以根据自己喜欢的风格选择参数

一段时间后，你实际就不再需要写CSS代码了，只用写Sass代码，在这种情况下设定输出格式为压缩格式，知道输出的CSS代码可以直接使用即可。

五、Sass的调试

我们使用Sass都希望能在浏览器中直接调试Sass文件，能找到对应的行数，现在这并不是一件难事：只要你的浏览器支持“sourcemap”功能即可。早一点的版本需要在编译的时候添加参数“sourcemap”

在Sass3.3版本以上的不需要添加这个参数也可以

sass --watch D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\test.css
在命令终端，看到如下信息：

Sass is watching for changes. Press Ctrl-C to stop.
write D:\xxw\sass\css\test.css
write D:\xxw\sass\css\test.css.map

说明你可以在浏览器中 sources 下调试你的Sass代码了

第四章 Sass的基本特性——基础

一、Sass 声明变量

定义变量的语法：Sass中声明变量使用$；

$width:300px;

Sass的变量包括三个部分：

1、声明变量的符号 $

2、变量名称

3、赋予变量的值

二、Sass普通变量与默认变量

普通变量：定义之后可在全局范围内使用

$fontSize:12px;

body{

fint-size:$fontSize

}

编译之后的CSS代码：

body{

　　font-size:12px;

}

默认变量：

sass的默认变量只需要在值后面加上！default即可

$baseLineHeight:1.5!default;
body{
  line-height:$baseLineHeight;
}
编译后的CSS代码：

body {
  line-height: 1.5; }

sass变量的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖方式：在默认变量之前重新声明下变量

$baseLineHeight:2;
$baseLineHeight:1.5!default;
body{
  line-height:$baseLineHeight;
}

编译后的CSS代码：

body {
  line-height: 2; }

注：默认变量的价值在进行组件化开发的时候会非常有用

三、变量的调用

在Sass中声明了变量之后，就可以在需要的地方调用变量。

比如：定义了如下变量：

$brand-primary:darken(#428bca,6.5%)
!default; //#337ab7
$btn-primary-color:#fff!default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($brand-primary,5%)!default;

在按钮button中调用，可以按下面方式调用

.btn-primary{
  background-color:$btn-primary-bg;
  color:$btn-primary-color;
  border:$btn-primary-border;
}
编译出来的CSS：

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: #2e6da4; }

四、局部变量和全局变量

先来看一个例子：

$color:orange !default;//定义全局变量（在选择器、函数、混合宏...的外面定义的变量为全局变量）
.block{
  color:$color;//调用全局变量
}
em{
  $color:red;//定义局部变量
  a{
    color:$color;//调用局部变量
  }
}
span{
  color:$color;//调用全局变量
}

编译后的CSS

.block {
  color: orange; }

em a {
  color: red; }

span {
  color: orange; }

根据演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成：全局变量就是定义在元素外面的变量
除此之外，Sass现在还提供一个！global参数，之后会详细介绍

全局变量的影子：当在局部范围内（选择器内、函数内、混合宏内、、）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量

需要声明变量的情况：创建变量只适用于感觉确实有必要的情况下。只有满足下述标准时方可创建新变量：
  1、该值至少出现了两次
  2、该值至少可能会被更新一次
  3、该值所有的表现都和变量有关
基本上没有理由声明一个不需要更新或者只在单一地方使用的变量

五、选择器嵌套

Sass中提供了选择器嵌套功能，但这并不意味着在Sass中的嵌套是无节制的，因为嵌套的层级越深，编译出来的CSS代码的选择器层级将越深。
选择器嵌套为样式表的作者提供了一个通过局部选择器嵌套实现全局选择的方法，Sass嵌套分为三种：
  1、选择器嵌套
SCSS下代码：

nav{
  a{
    color:red;
    header &{
      color:green;
    }
  }
}

编译出的CSS代码：

nav a {
  color: red; }
  header nav a {
    color: green; }

  2、属性嵌套
Sass中提供了属性嵌套功能，CSS有一些属性前缀相同，只是后缀不一样，比如：border-top/right,与之类似的还有margin、padding、font等
例子：

.box{
  border:{  //注意要写上冒号：
    top:10px;
    right:15px;
  }
}
编译出来的CSS代码：

.box {
  border-top: 10px;
  border-right: 15px; }

  3、伪类嵌套
其实伪类嵌套和属性嵌套非常类似，只不过需要借助“&”符号配合使用
例子：

.clearfix{
  &:before,
  &:after{
    content:"";
    display:table;
  }
  &:after{
    clear:both;
    overflow:hidden;
  }
编译出来的CSS代码：

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }
.clearfix:after {
  clear: both;
  overflow: hidden; }

使用嵌套选择器存在的问题：
1、将使最终的代码难以阅读
2、选择器越具体则声明语句越冗长，而且对最近选择器的引用（&）越频繁，出现混淆选择器路径和探索下一级选择器的错误率很高

所以我们应可能避免选择器嵌套

八、声明混合宏
如果你的整个网站中有几处样式类似，在Sass中可以使用变量来统一处理，但是当你的样式变得越来越复杂，需要重复使用大段样式时，使用变量就无法达到目的了。这事，Sass中的混合宏就变得非常有意义

1、声明混合宏
1)不带参数混合宏
在Sass中，使用“@mixin”来声明一个混合宏。如：
@mixin border-radius{
　　-webkit-border-radius:5px;
　　border-radius:5px;
}

其中@mixin 是用来声明混合宏的关键词 ，border-rasius是混合宏的名称。大括号中为复杂的样式代码

 2）带参数混合宏

  除了申明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：

@mixin border-radius($radius:5px){
　　-webkit-border-radius:$radius;
　　border-radius:$radius;
}

 3)复杂的混合宏
Sass的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助我们更好的做事情
@mixin box-shadow($shadow...){
　　@if length($shadow)>=1{
 　　　@include prefixer(box-shadow,$shadow);
}@else{
　　@shadow:0 0 4px rgba(0,0,0,.3);
   @include prefixer(box-shadow,$shadow);
 }
}
这个box-shadow的混合宏，带有多个参数，这个时候可以使用“...”来代替

九、调用混合宏

在Sass中通过“@include”关键词来调用声明好的混合宏，例如：

@mixin border-radius{
  -webkit-border-radius:3px;
    border-radius:3px;
}
在一个按钮中调用定义好的混合宏“border-radius”，可以这样使用：

button{
  @include border-radius;
}
编译出来的CSS代码：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px; }

十、混合宏的参数

Sass的混合宏有一个强大的功能，可以传参，在Sass中传参主要有以下几种情形：
 1）传一个不带值的参数

 @mixin border-radius($radius){
　　-webkit-border-radius:$radius;
     border-radius:$radius;

}
在混合宏中定义了一个不带任何值的参数”$radius“
在调用的时候可以给这个混合宏传一个参数值

.box{
  @include border-radius(3px);
}
编译出来的CSS代码：
　　.box {

  -webkit-border-radius: 3px;
  border-radius: 3px; }

2）混合宏的参数——传一个带值的参数

在Sass的混合宏中还可以给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:5px){
  -webkit-border-radius:$radius;
  border-radius:$radius;
}
在调用类似这样的混合宏时，会多一个机会，如果你页面中的圆角很多地方都是”3px“，这时候只需要调用默认的混合宏”border-radius“

.btn{
  @include border-radius;
}
编译出来的CSS代码：

.btn {
  -webkit-border-radius: 5px;
  border-radius: 5px; }
但有时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.btn{
  @include border-radius(50%);
}
编译出来的CSS代码：

.btn {
  -webkit-border-radius: 50%;
  border-radius: 50%; }

3）混合宏传多个参数
Sass混合宏除了能传一个参数外，还可以传多个参数，如：

@mixin center($width,$height){
  width:$width;
  height:$height;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-($height)/2;
  margin-left:-($width)/2;
}
混合宏”center“就传了多个参数，在实际调用和调用其它混合宏是一样的
.box-center{
　　@include center(500px,300px);
}
编译出来的CSS代码：

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px; }

有一个特别的参数”...“，当混合宏传的参数过多时，可以使用这个参数来代替，如：

@mixin box-shadow($shadows...){
　　@if length($shadows)>=1{
　　　　-webkit-box-shadow:$shadows;
       box-shadow:$shadows;
　　}@else{
　　　　$shadows:0 0 2px rgba(#000,.25);
　　　　-webkit-box-shadow:$shadow;
               box-shadow:$shadow;
   }
}

在实际调用中：

.box{
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
编译出来的CSS代码：

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }

十一、混合宏的不足

混合宏在实际编码中给我们带来很多方便之处，特别对于复用重复代码块，但其最大的不足之处是：会生成冗余的代码块，如：在不同的地方调用一个相同的混合宏时，如：

@mixin border-radius($radius){
  -webkit-border-radius:$radius;
  border-radius:$radius;
}
.box{
  @include border-radius(3px);
  margin-bottom:10px;
}
.btn{
  @include border-radius(3px);
}
编译出来的CSS代码：

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 10px; }

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px; }
上面可以明显看出，Sass在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起，这是Sass的混合宏最不足之处。

十二、Sass的扩展和继承
在Sass中同CSS一样，也具有继承一说，也是继承类中的样式代码块。在Sass中是通过关键词“@extend”来继承已存在的类样式块，从而实现代码的继承。如：

.btn{
  border:1px solid #cccccc;
  padding:6px 10px;
  font-size:14px;
}
.btn-primary{
  background-color:#f36;
  color:#fff;
  @extend .btn;
}
.btn-second{
  background-color:orange;
  @extend .btn;
}
编译后的CSS代码：

.btn, .btn-primary, .btn-second {
  border: 1px solid #cccccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary {
  background-color: #f36;
  color: #fff; }

.btn-second {
  background-color: orange; }
上述可以看出，在Sass中的继承，可以继承样式块中所有样式代码，而且编译出来的CSS会将选择器合并在一起，形成群组选择器：

.btn, .btn-primary, .btn-second {
  border: 1px solid #cccccc;
  padding: 6px 10px;
  font-size: 14px; }

十三、Sass占位符 %placeholder

Sass 中的占位符%placeholder功能是一个很强大，很实用的功能，他可以取代以前CSS中的基类造成的代码冗余的情形，因为%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码，如：

%mt5{
　　margin-top:5px;
}
%pt5{
　　padding-top:5px;
}
这段代码没有被@extend调用，他并没有产生任何代码块，只有通过@extend调用才会产生代码：

%mt5{
  margin-top:5px;
}
%pt5{
  padding-top:5px;
}
.btn{
  @extend %mt5;
  @extend %pt5;
}
.block{
  @extend %mt5;
}
span{
  @extend %pt5;
}
编译出来的CSS代码：

.btn, .block {
  margin-top: 5px; }

.btn, .block span {
  padding-top: 5px; }
上述可以看出，通过@extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让代码变得更为干净

十四、混合宏 VS 继承 VS 占位符

	混合宏	继承	占位符
声明方式	@mixin	.class	%placeholder
调用方式	@include	@extend	@extend
使用环境	如果相同代码块需要在不同环境传递不同的值时，可以通过混合宏 来定义重复使用的代码块。 不足：他不会自动合并相同的样式代码，如果在样式文件中调用同一个 混合宏，会产生多个对应的样式代码，造成代码的冗余	如果相同代码块不需要传递不同的值，并且 此代码块已在CSS文件中定义，可以通过Sass 的继承来调用已存在的基类。使用继承将会将调用相同基类的代码合并在一起 不足：如果基类并不存在于HTML结构时，不管调用与不调用，在编译出来的CSS中都将产生基类对应的样式代码	占位符和继承基本类似，唯一不同的是， 相同代码块并没有在基类中存在，而是 额外声明。如果不调用已声明的占位符 ，将不会产生任何样式代码，如果早不 同选择器调用占位符，那么编译出来的CSS代码将会把相同的代码合并在一起。

十七、插值

使用CSS预处理器语言的一个主要原因是想使用Sass获得一个更好的结构体系。比如：想写更干净的、高效的和面向对象的CSS。Sass中的插值就是重要的一部分
例子：

$properties:(margin,padding);
@mixin set-value($side,$value){
  @each $prop in $properties{
    #{$prop}-#{$side}:$value;
  }
}
.login-box{
  @include set-value(top,14px);
}

@each...in...语句，它可以让变量和属性工作很完美，上面代码编译成CSS代码：
　　

.login-box {
  margin-top: 14px;
  padding-top: 14px; }

这是Sass插值中一个简单的实例。当你想设置属性值时，你可以使用字符串插入进来。另一个游泳的用法是构建一个选择器。可以这样使用：

@mixin generate-sizes($class,$small,$medium,$big){
  .#{$class}-small{font-size:$small}
  .#{$class}-medium{font-size:$medium}
  .#{$class}-big{font-size:$big}
}
@include generate-sizes('header-text',12px,20px,40px);
注意：#{}语法不是随处可用，也不能在mixin中调用（注意是调用而不是声明）插值

幸运的是，可以通过使用@extend去使用插值
例如：

%update-status{
  margin-top:20px;
  background:#F00;
}
.selected-status{
  font-weight:bold;
}
$flag:"status";
.navigation{
  @extend %update-#{$flag};
  @extend .selected-#{$flag};
}
编译出来的CSS代码：

.navigation {
  margin-top: 20px;
  background: #F00; }

.selected-status, .navigation {
  font-weight: bold; }

十八、Sass注释

注释对于一名程序员来说极其重要，良好的注释能帮助自己或者别人阅读代码。在Sass中有两种注释方式：
 1、类似CSS注释方式,使用/*开头*/结尾
 2、类似javascript的注释方式，使用”//“
两者区别：前者在编译出来的CSS显示，后者不显示

十九、Sass数据类型
Sass和javascript语言类似，也具有自己的数据类型，在Sass中包含以下几种数据类型

数字：如，1，2，13，10px
字符串：有引号字符串和无引号字符串，如，”foo“、”bar“、baj
颜色：如 blue、#04a3f9、rgba(255,0,0,0.5)
布尔型：如，true，false
空值：null
值列表：用空格或逗号分开，如：1.5em 1em 0 2em 、Helvetica、Arial、sans-serif
Sass也支持其他CSS属性值，比如：Unicode 范围或！important声明。但是Sass不会特殊对待这些属性值，一律视为无引号字符串

二十、Sass字符串
SassScript支持CSS的两种字符类型：

 1、有引号字符串,如：”Lucida Grande“
 2、无引号字符串，如：sans-serif bold
在编译CSS文件时不会改变其类型，只有一种情况例外，使用#{}插值语句时，有引号字符串将被编译为五引号字符串，这样方便了在混合指令中引用选择器名
@mixin firefox-message($selector){
　　body .firefox #{$selector}:before{
　　 content:"Hi,firefox users!";
 }
}
@include firefox-message(".header");
编译出来的CSS代码为：

　body .firefox .header:before{
　　 content:"Hi,firefox users!";
 }

二十一、值列表
所谓的值列表是指Sass中如何处理 通过空格或者逗号分隔的一系列的值
独立的值也被视为值列表——只包含一个值的值列表

Sass值列表函数赋予了值列表更多功能
  1、nth函数 可以直接访问值列表中的某一项
  2、join函数  可以将多个值列表连结在一起
  3、append函数 可以在值列表中添加值
  4、@each  能够给值列表中每个项目添加样式

可以用（）表示空的列表，这样不可以直接编译成CSS，如果值列表中包含空的值列表或空值，编译时将清除空值。

第五章 Sass的基本特性——运算

一、加法
在Sass中，运算只是其基本特征之一。在Sass中可以做各种数学计算。
首先简单普及一下CSS中的单位问题：

在写css的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。
　　1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
　　譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
　　2、em：相对长度单位。相对于当前对象内文本的字体尺寸。
　　如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　3、pt：点(Point)，绝对长度单位。
　　4、ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
　　如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　5、pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。
　　6、in：英寸(Inch)，绝对长度单位。
　　7、mm：毫米(Millimeter)，绝对长度单位。
　　8、cm：厘米(Centimeter)，绝对长度单位。
　　其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
　　容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。

加法运算：是Sass中运算中的一种，在变量或属性中都可以做加法运算，如：

.box{
  width:20px + 8in;
}
编译出来的CSS代码：

.box {
  width: 788px; }
但是对于携带不同类型的单位时，在Sass中计算会报错

二、减法
Sass的减法运算和加法运算类似

.content{
  width:$full-width - $sidebar-width;//为了区分减号与横线，减数后与被减数前分别加上一空格
}
编译出来的CSS代码：

.content {
  width: 760px; }

同样，运算时碰到不同类型的单位时，编译也会报错，如：px和em进行运算

三、乘法
Sass中的乘法晕运算和前面介绍的加法与减法运算略有不同。虽然它能够支持多种单位（如 px，em，%），但当一个单位同时声明两个值时会有问题
.box{
　　width:10px*2px;
}
编译时候会报错，如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。

例如：.box{
　　width：10px*2;
}
编译出来的CSS代码：

.box{
　　width：20px;
}

Sass的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错

四、除法
Sass的乘法运算规则也适用于除法运算，不过除法运算还有一个特殊之处。由于”/“符号在CSS中已做为一种符号使用，因此在Sass中做除法运算时，直接使用”/“做为除号时，编译得不到我们想要的效果，也不会报错
所以在进行除法运算时，要在运算的外面加上一小括号（），如：

.box{
  width:(100px/2);
}
编译出来的CSS代码：

.box {
  width: 50px; }

另外，如果”/"符号在已有的数学表达式中时，也会被认作除法符号，如：

.box{
  width:100px/2+2in;
}
编译出来的CSS代码：

.box {
  width: 242px; }

在Sass除法运算中，当用变量进行除法运算时，”/“符号也会被自动识别为除法，如：

$width:1000px;
$nums:10;
.item{
  width:$width/10;
}
.list{
  width:$width/$nums;
}
编译出来的CSS代码：

.item {
  width: 100px; }

.list {
  width: 100px; }
综上所述，”/“符号被当作除法运算符时有以下几种情况：
 1）如果数值或他的任意部分是存储在一个变量中或是函数的返回值
 2）如果数值被圆括号包围
 3）如果数值是另一个数学表达式的一部分
Sass的除法运算还有一个情况，如果两个值带有相同的单位值时，除法运算会得到一个不带单位的数值如：

.box{
  width:(1000px/100px);
}
编译出来的CSS代码：

.box {
  width: 10; }

五、变量运算
在Sass中除了可以使用数值进行运算之外，还可以使用变量进行运算，在Sass中使用变量进行运算，这使得Sass的数学运算功能变得更加实用，示例：

$content-width:720px;
$sidebar-width:220px;
$gutter:20px;
.content{
  width:$content-width + $sidebar-width +$gutter;
  margin:0 auto;
}
编译出来的CSS代码：

.content {
  width: 960px;
  margin: 0 auto; }

六、数字运算
在Sass运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法运算。而且还可以通过括号来修改他们的运算先后顺序
和我们的数学运算是一样的，如：

.box{
  width:((220px+720px)-11*20)/12;
}
编译出来的CSS代码：

.box {
  width: 60px; }

第四章 Sass的基本特性——基础