Sass是成熟、稳定、强大的CSS预处理器，可以很方便的复用一些CSS样式，Sass 是一款强化CSS的辅助工具，它在CSS 语法的基础上增加了变量 、嵌套 、混合、导入 等高级功能，这些拓展令 CSS 更加强大与优雅。通过使用变量来定义一些常用反复使用的CSS属性值。，然后通过变量名来引用它们，而无需重复书写这一属性值。

1.sass与.scss

Sass包含两种文件，分别是.sass与.scss，那这两种文件有什么区别了？

Sass包括两种语法，分别为SCSS语法和缩进语法，SCSS语法的文件以.scss结尾，缩进语法以.sass结尾。

1.1.SCSS语法

SCSS 语法使用 .scss 文件扩展名，除了少部分的例外，它是CSS的超集，也就是说所有的CSS也同样都是有效SCSS，所有CSS3 语法在 SCSS中都是通用的，同时加入Sass的特色功能。由于其写法跟CSS很相似，所以一般都使用SCSS 语法，该语法是最流行的语法，我在项目中也是用SCSS 语法。

注，任何一种格式可以直接 导入 @import到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式。

1.2.缩进语法

缩进语法是Sass最原始的语法，因此它的文件扩展名为.scss，缩进语法支持与SCSS 语法相同的所有特性，但是它由于使用的是缩进语法，因此在代码中都是以缩进的方式来描述文档的模式，而不是用花括号来描述文档的格式，如下分别为SCSS语法和缩进语法的代码。

SCSS语法

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;
  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;
  &:hover { cursor: pointer; }
  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

缩进语法

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded
  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle
  &:hover
    cursor: pointer
  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

2安装

Sass是基于ruby语言开发的，所以需要先安装ruby环境。然后再使用如下命令进行安装。

gem install sass
gem install compass

2.1编译Sass

写好的.scss或.sass文件不能直接引入到html中，需要先对将Sass代码编译成CSS代码，可以使用sass命令进行编译，一般在开发的时候大多使用的是webpack，所以可以使用webpack的loader进行编译，可以通过如下命令来安装sass的loader。

npm install sass-loader node-sass webpack --save-dev

3.快速入门

3.1变量

Sass一个重要的特性是使用了变量，可以通过变量来定义一些常用的css属性值，在需要用到属性值的地方直接使用变量就可以了，在Sass中，使用$来定义变量，如下所示：

$theme-color: #F90;
$theme-border:1px solid black;

在需要使用变量的地方直接引入既可。如下所示：

div{
  color:$theme-color;
  border:$theme-border;
  font-size:14px;
}

除了在外部定义变量外，也可以在块级中定义，如下所示：

div{
  color:$theme-color;
  border:$theme-border;
  font-size:14px;
  $width: 100px;
  width: $width;
}

3.2CSS嵌套

在写css的时候，我们经常会碰到如下的代码：

<div class="layout">
        <div>
            <p></p>
        </div>
        <div>
            <h2></h2>
        </div>
    </div>
.layout div p{

    }
    .layout div h2{
        
    }

如果html标签比较复杂时，在写CSS的时候会写很多的.layout div，写起来很烦，在sass中可以使用嵌套的方式来写，如下所示：

.layout{
  div{
    h2{}
    p{}
  }
}

这样子看上去就简洁多了。如果出现一些父选择器，也可以使用&来表示，如下所示：

article a {
  color: blue;
  &:hover { color: red }
}

编译后的代码如下所示：

article a { color: blue }
article a:hover { color: red }

嵌套属性

当在书定CSS时，经常会碰到border-style，border-width，border-color，以及border-*等类似的代码时，写多了会感觉很烦。在sass中可以把属性名从中划线-的地方断开，如下所示：

border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }

3.3导入SASS

sass的@import可以在生成CSS的时候，可以把相关文件导入进来，在导入文件的时候，可以省略.sass或.scss文件的后缀名。当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来。

3.4注释

在sass中可以使用//进行注释。如下所示：

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

3.5混合器

在前面介绍过变量，可以用变量来定义一些属性值，还是有一定的限制，只能定义单个的属性值，如果需要重用更多的代码样式时，变量就有点力不从心了，这时可以使用混合器来定义重复的代码，混合器使用@mixin标识符定义。如下所示：

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

可以使用@include来引入定义的混合器。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

混合器除了设置固定的样式外，还可以使用参数来动态传入一些属性值，如下所示：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

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

3.6继承

选择器继承是指一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

个人博客