在没有css预处理器之前，在定义样式的过程中，存在着大量的重复工作，而且维护起来比较麻烦。css预处理器中可以将重复的部分抽象出来，定义成变量、混合器等，当然，这些知识css预处理器的部分功能。Sass是css预处理器中应用最为广泛的一种，它是层叠样式表语言。在Sass中可以使用变量、嵌套、混合器、继承、函数等等，Sass可编译成对应的css样式。

Sass知识点.png

Sass有两种两套语法，最早的一种使用缩进语法，使用缩进来区分代码块，文件扩展名为.sass。而较新的语法为"SCSS"，与css类似，使用{}来表示代码块，文件扩展名为.scss。本文采用scss语法。

//sass语法
$font-color: #CCCCCC
.content
    color: $font-color
//scss语法
$font-color: #CCCCCC;
.content {
    color: $font-color;
}

变量

Sass中一个重要的特性就是引入了变量，对于那些重复使用的属性值可以定义成变量，这样当需要修改属性值时，只需要修改变量的值即可。

变量的定义

变量使用$符号进行定义。

$font-color: #CCCCCC;

变量的命名规则

变量名是不区分中划线-和下划线的_，即如果使用中划线定义了变量$font-color，在变量引用中使用下划线$font_color是可以的。

变量的引用

只要将属性值换成对应的变量就可以了。

$font-color: #CCCCCC;
.content {
    color: $font-color;
}
//编译后
.content {
    color: #CCCCCC;
}

嵌套

想必大家在css的过程中遇到过这种情况：

#content article { color: #333333; }
#content article p { font-size: 12px; }
#content article .info { color: #BCBCBC; }

#content article重复了三遍，真的很烦人。Sass中规则块可以嵌套规则块，从而可以只写一遍#content article

#content article {
    color: #333333;
    p {
        font-size: 12px;
    }
    .info {
        color: #BCBCBC;
    }
}

编译后的结果跟那段烦人的代码是一样的。Sass嵌套一是避免了重复选择器，二是可以清楚的表达层级关系，使样式可读性更高。

父选择器嵌套

在css中，我们经常会用到伪类，比如a标签的:hover，那么在Sass中，该如何设置伪类的样式呢

a {
    color: #333333;
    :hover {
        color: blue;
    }
}

是这样吗？这个编译完后的样式如下：

a { color: #333333; }
a :hover { color: blue; }

很显然，伪类的样式并未应用到a标签上，而是应用到了a的后代元素上，父选择器&可以帮我们解决这个问题。

a {
    color: #333333;
    &:hover {
        color: blue;
    }
}
//编译后
a { color: #333333; }
a:hover { color: blue; }

群组选择器嵌套

群组选择器是经常使用的一种选择器，将多个选择器用逗号,分隔开，然后定义它们共同的样式。

.container {
    h1, h2, h3 {
        color: #333333;
    }
}
//编译后
.container h1, .container h2, .container h3 {
    color: #333333;
}

子组合选择器和同层组合选择器嵌套

div {
   > p {
     color: #f583c4;
   }
   ~ p {
     color: #8945ac;
   }
   + ul {
     color: #ac4b3a;
   }
}
//编译后
div > p {
  color: #f583c4; }
div ~ p {
  color: #8945ac; }
div + ul {
  color: #ac4b3a; }

属性嵌套

在Sass中，不仅选择器可以嵌套，属性也是可以嵌套的。border-width、border-style、border-color， 重复着"border-"部分。如果采用属性嵌套，会这样写

.btn {
    border: {
        width: 2px;
        style: solid;
        color: #ccc;
    }
}
//编译后
.btn {
  border-width: 2px;
  border-style: solid;
  border-color: #ccc; }

注意，border后面有个冒号，表示其为属性，与选择器区分开。

混合器

前面说到，单个样式的重复可以使用变量。而大段样式的重复可以使用混合器。

定义混合器

混合器使用@mixin定义，后面跟上混合器名称。并且使用@include引入选择器

@mixin success-tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee;
}
.tip {
  @include  success-tip;
}
aside .common-tip {
  @include  success-tip;
  font-size: 10px;
}
//编译后
.tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee; }

aside .common-tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee;
  font-size: 10px; }

混合器传参

上面的例子中，每个属性值都是固定的，为了是混合器更加灵活，可以为混合器设置参数。

@mixin success-tip($font-color, $border-style) {
  background-color: palevioletred;
  color: $font-color;
  padding: 20px 10px;
  border: 1px #{$border-style} #eee;
}
.tip {
  @include  success-tip(#fff, solid);
}
aside .common-tip {
  @include  success-tip(#000, dotted);
  font-size: 10px;
}
//编译后
.tip {
  background-color: palevioletred;
  color: #fff;
  padding: 20px 10px;
  border: 1px solid #eee; }

aside .common-tip {
  background-color: palevioletred;
  color: #000;
  padding: 20px 10px;
  border: 1px dotted #eee;
  font-size: 10px; }

参数默认值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

@mixin success-tip($font-color: #fff, $border-style: solid) {
  background-color: palevioletred;
  color: $font-color;
  padding: 20px 10px;
  border: 1px #{$border-style} #eee;
}
.tip {
  @include  success-tip;
}
//编译后
.tip {
  background-color: palevioletred;
  color: #fff;
  padding: 20px 10px;
  border: 1px solid #eee; }

选择器继承

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。

.error {
    color: red;
    border: 1px solid;
}
.notice-error {
    @extend .error;
    border-width: 2px;
}
//编译后
.error, .notice-error {
  color: red;
  border: 1px solid; }

.notice-error {
  border-width: 2px; }

从上面的例子看出，编译后的css样式文件中，继承和被继承的选择器组合成了群组选择器，被继承的样式不会重复出现。而混合器是每使用一次，编译后混合器的样式就会重复一次。

多重继承

同一个选择器可以同时继承多个选择器

.error {
  color: red;
  border: 1px solid;
}
.notice {
  background: #ff0;
  border: 2px solid
}
.notice-error {
  @extend .error;
  @extend .notice;
  font-size: 12px;
}
//编译后
.error, .notice-error {
  color: red;
  border: 1px solid; }

.notice, .notice-error {
  background: #ff0;
  border: 2px solid; }

.notice-error {
  font-size: 12px; }

链式继承

简单说，就是选择器a继承选择器b，选择器b又继承了选择器c。

.error {
  color: red;
}
.notice-error {
    @extend .error;
    background: #ffffff;
}
.serious-error {
    @extend .notice-error;
    font-size: 12px;
}
//编译后
.error, .notice-error, .serious-error {
  color: red; }

.notice-error, .serious-error {
  background: #ffffff; }

.serious-error {
  font-size: 12px; }

文件导入

css和Sass中都有@import规则，css中只有执行到@import时，才会去下载对应的css文件。而Sass中在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

导入Sass文件

//index.scss
@mixin border-corner {
  border-radius: 10px;
}
#content {
  font-size: 12px;
}

//demo.scss
@import "index";
.error {
  color: red;
  @include border-corner;
}

//demo.scss编译后的样式为
#content {
  font-size: 12px; }
.error {
  color: red;
  border-radius: 10px; }

demo.scss中使用了index.scss中的混合器border-corner。

导入css文件

由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

这就是说，你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

运算

Sass允许代码中使用运算。

$var: 12px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var - 10px;
}
//编译后
body {
  margin: 7px;
  top: 150px;
  right: 2px; }

由于文章太长，因此控制指令、函数和注释三部分放到了<a href="http://www.jianshu.com/p/032011e76c46">Sass总结（二）</a>中。