什么是sass?

Sass是是一种基于ruby编写的CSS预处理器，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言，它可以使用变量、嵌套、混入、继承，运算，函数等功能，使得CSS的开发，变得简单清晰可维护，同时也大大节省了设计者的时间，提高了效率。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。我们这里讨论的如无特殊说明，全指scss。

为什么是sass？

sass虽然是最早的，但是一开始还是不太好用，而且使用缩进作为分隔符，不符合css使用大括号的习惯，所以less以后起之秀的身份轻松赢得了人心，后来sass借鉴于less的一些思想，改进了自己的设计，并有了scss，然后经过几个版本的更新，特别版本3.2.0做了些革命性的更新，以使它从其他几个编译处理器中脱颖而出。下面我们抽几个优秀的思想一起看下。

• 默认变量：sass版本3.0引入了默认变量!default，使变量更好控制。
• @content：sass版本3.2.0对mixin进行了补充，以使其可以接受一整块样式，大多应用在css3的@media情况下。
• 占位选择器%：sass版本3.2.0引入了占位选择器%，对于不传递参数的mixin，以后都可以考虑使用它，因为有两个优点——不调用就不会产生css；解析的css是以组合方式申明的，而不是mixin的拷贝方式。
• 变量参数：sass版本3.2.0对变量参数进行了补充，使其可以设置css3的多个属性值的参数，如box-shadow，transition它们都可以拥有多个值，并以逗号隔开。而mixin的参数本来就是以逗号分开的，所以这样一来对css3定义些mixin就会报错，于是有了变量后面加三个点来表示这个参数是表示可以传递多个值的。

目前来说，sass的库也是最多的，在方便我们学习的同时，也从另一方面表明其优越性。

sass语法

sass有两种后缀名文件：一种后缀名为sass；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号包裹的。而本教程中所说的所有sass文件都指后缀名为scss的文件。

导入

sass的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，不会合并到一个文件。然后所有的sass导入文件都可以忽略后缀名.scss。

PS：一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，如可写成@import "mixin"

被导入sass文件a.scss：

//a.scss //------------------------------- body {   background: #eee; } 

需要导入样式的sass文件b.scss：

@import "reset.css"; @import "a"; p{   background: #0982c1; }  

转译出来的b.css样式：

@import "reset.css"; body {   background: #eee; } p{   background: #0982c1; } 

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

注释

sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

标准的css注释

/* *我是css的标准注释 *设置body内距 */ body{   padding  5px }  

//双斜杆单行注释

单行注释跟JavaScript语言中的注释一样，使用又斜杠（//），但单行注释不会输入到CSS中。

//我是双斜杠表示的单行注释 $mainColor: #369; //定义主体颜色   

变量

在sass中你也可以声明变量，并在整个样式表中使用。sass支持任何变量（例如：颜色、数值、文本等）。然后你可以在任意地方引用变量。

sass声明变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。一般我们定义的变量都为属性值，可直接使用，当然变量还有另外一种用法，以#{$variables}形式插入。

//sass style //-------------------------------  //声明变量 

$baseLineHeight:        1.6;  

$baseFontSize:          14px 

!default; $baseLineHeight:        1.5 

!default; $bodyBgColor:           #fff 

!default; $textColor:             #333 !default;  $borderDirection:       top 

!default;   //调用变量 

body {    font-size: $baseFontSize;   line-height: $baseLineHeight;    background-color:$bodyBgColor;   color:$textColor; } 

.border-#{$borderDirection}{   border-#{$borderDirection}:1px solid #ccc; }  

//css style //-------------------------------