Sass 可能会节约你 50%的 CSS 代码Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言，可以帮

Sass 介绍

Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

之前 Sass 采用的是缩进的方法进行书写，大多数开发者并不习惯，所幸第三代 Sass 改变了写法，并且将后缀名由sass 更改为 scss。

使用 Sass 的好处

避免下载请求

当在 CSS 中导入其他 CSS 时，会发送一个 http 请求，而且这种请求不是并发的，这在一定纬度上，浪费了资源。并在 Sass 中，Sass 会将所有 CSS 编译成一个 CSS 文件，并不会发起下载请求。
节省代码（后续会介绍）

Sass 嵌套的写法以及定义变量、函数的方法，可以帮我们节省很多代码。
方便维护（后续会介绍）

Sass 可以定义全局变量文件，你可以在这个文件中书写具体的颜色或者路径。你还可以定义 @mixin 混入，将公共代码提到全局。

Sass 的安装

一般来说，我们安装 Sass 是在前端三大框架之中。但是，这里我们可以在本地安装 Sass 进行自己的练习。

// 全局安装 Sass
npm install -g sass

// 将 scss 文件转换为 css 文件，注意：这里的路径为当前路径
sass test.scss test.css

Sass 的基础知识

定义变量

Sass 变量可以存储以下信息：字符串、数字、颜色值、布尔值、列表、null 值。

// 相信有编程思想的你，一眼就能看懂下面的代码
// Sass 中定义变量使用 $ 符号。
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;

p {
    color:$myColor;
    font-size:$myFontSize;
    font-family: $myFont;
}

值得注意的是：在 Sass 中定义变量也是具有作用域的。没错全局作用域以及块级作用域，Sass 里面也有。当然，我们一般都使用全局作用域，块级作用域也可以使用 !global 变为全局作用域，这里不展开说明。

嵌套规则与属性

Sass 可以进行嵌套进行简化代码的书写

div {
    color:red;
    p {
     padding:6px;   
    }
}

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 等，我们可以使用嵌套属性来编写它们(必须加:)：

p{
    font: {
        family: Helvetica,sans-serif;
        size: 18px;
        weight: bold;
    }

    text: {
        align: center;
        transform: lowercase;
        overflow: hidden;
    }   
}

值得注意的是：这种写法不能出现在最外层，所以最外层有 p 标签。

& 标识符

直接连接父选择器，一般连接伪类

p {
    &:hover{
        color:blue;
    }
}

导入样式

@import 'filename';

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。此外，你也可以导入 CSS 文件。

Sass 会将非局部（文件名起始处带下划线，如：_test）的scss 文件导入并且编译。局部的scss 文件只会导入不会编译。区别在于导入会导入变量以及混入，被导入的文件能够使用，导入文件css 具体样式不会编译、生效。

混入

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

.danger {
  @include important-text;
  background-color: green;
}

生成的 CSS 代码

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

混入中也可以包含混入（不做展示）

混入之中可以传递变量（变量可以拥有默认值）

/*这段代码应该很好理解*/
// 混入接收两个参数
@mixin bordered($color, $width:1px) {
    border: $width solid $color;
}

.myArticle {
    // 调用混入，并传递两个参数
    @include bordered(blue, 1px);  
}

混入可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

.shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

生成的 CSS 代码

.shadows {
    -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

混入浏览器前缀

我们也可以在混入中混入属性或者选择器。此时，变量必须用#{}包裹起来。

@mixin home($class,$direction){
    .#{$class}{
        margin-#{$direction}:5px;
    }
}
.test{
    @include home(div,left); 
}

生成的 CSS

.test .div {
    margin-left: 5px;
}

继承

@extend 很好的体现了代码的复用。

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}

生成的 CSS

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

运算

Sass里面支持数字的加减乘除、取整等运算 (+, -, *, /, %)。

函数

Sass 里面可以使用一些函数，不过大多数我们一般比较少用，这里会介绍一些，不过若你想观看全部的函数请移步 Sass 官网或者菜鸟教程。

一般 Sass 函数有着几种类型：字符串、数字、列表、映射、选择器、introspection、颜色。

利用 @for 指令在限制的范围内重复输出样式

// 设置 home 类下第3到4个div子节点需设置指定样式
// 同样的，循环也有 @while 指令，这里不再赘述
@for $i from 3 through 4 {
    .home {
        > div:nth-child(#{$i}) {
            //...
        }
    }
}

利用 map 以及 each 进行样式管理

// 通过结合each遍历、map数据类型、@mixin/@include混合器、#{}插值，从而生成不同的选择器类，并且每个选择器类中的背景图片不同
$img-list: (
    (accessimg, $papers-access),
    (folderimg, $papers-folder),
    (bmpimg, $papers-bmp),
    (xlsimg, $papers-excel),
    (xlsximg, $papers-excel),
    (gifimg, $papers-gif),
    (jpgimg, $papers-jpg),
    (unknownimg, $papers-unknown)
);

@each $label, $value in $img-list {
    .com-hwicon__#{$label} {
        @include commonImg($value);
    }
}

自定义函数

@function double($n){
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}

样式代码检查以及校验

校验规则

可以使用 stylelint 插件进行 CSS 检测。具体请参考官网。

样式修复

具体参照 stylefmt 官网。

Sass 使用技巧

定义全局变量，后期方便项目迅速“换肤”或者调整。

全局变量的文件最好使用 _ 开头，这样 Sass 只会导入不会编译（里面的 CSS 并不会生效），而且让人一眼就能明白这是个全局变量文件。当然我们也可以将图片路径放在全局变量文件中（Sass 也可以进行路径拼接）。
使用 @mixin 混入，当页面有公共的样式时，可以提到全局当中，可以减少代码以及方便维护。但是，提到全局中，开发者第一时间可能不好找，我们可以采用混入的方式。既可以采用全局样式，也可以给开发者一个标记。

当然混入最好文件命名也是以 _ 开头，理由如上。

Sass 疑惑

@mixin 混入和 @extend 继承指令有什么区别？

混入以及继承都是为了复用代码，混入与继承最大的区别就是混入可以带入参数，而继承不可以。一般我们也在定义全局变量也会自发的使用混入（使用继承其实也可以）。