关于Sass你知道多少

项目中一直在使用sass和less，也是时候归纳总结下它们的特性了，先来看看sass。
sass有两种后缀名的文件，一种是sass，一种是scss。后缀名为.sass的文件书写格式是不用大括号和分号的，后缀名为.scss的格式与css是一样的，本文主要是针对后缀名为.scss的文件。

优雅的sass

特性

变量 嵌套 文件导入 混合器 继承 函数

变量

sass中是可以使用变量的,用$标识符来定义，如：$color，使用变量的好处就在于一处定义、改动，其他所有用到该变量的地方都会改变，css生成时，变量会被它们的值所替代。
sass存在作用域这个坑，如果我们想在选择器内把一个变量定义为全局变量，需要用到！global标识符实现

$themeColor: #00ffee
div{
    border: 1px solid $themeColor;
}

$themeColor: #ddffee
div{
    $themeColor: #ffccee !global; // 全局变量
    border: 1px solid $themeColor; //编译成css为#ffccee
}
span{
    color: $themeColor; //编译成css为#ffccee
}

嵌套

• 选择器嵌套
• 属性嵌套

选择器嵌套

如果我们想让一个.container容器中的所有div的margin-top为10px
在css中我们这么写：

 .container div{
        margin-top:  10px;
 }

在sass中我们可以用更加易懂的方式实现

 .container{
     div{
         margin-top:  10px;
     }
 }

sass的嵌套使得我们的代码可读性更高，也减少了代码量

例如，css实现：

.container article p { color: #ffeecc }
.container a { font-size: 14px }
.container #content span { color: #ffffff}

sass实现 （避免了父选择器的重复书写，嵌套是不是省事多了呢）

.container {
    article{
        p{
            color: #ffeecc;
        }
    }
    a{
        font-size: 14px;
    }   
    #content{
        span{
            color: #ffffff;
        }   
    }
}

说到选择器嵌套呢，这里不得不提的就是父选择器&的使用，熟悉css的同学都知道我们经常会用到:hover、:active等一些伪类选择器，那么在sass中我们应该如何使用呢？父选择器～～顾名思义，&标识符代表的就是父选择器，请看下面的代码：

a{
    color: blue;
    &:hover{  // 这里的&就是a标签选择器
        color: green;
    }
}

编译成css

a{
    color: blue;
}
a:hover{
    color: green;
}

属性嵌套

在sass中，我们可以实现选择器的嵌套使得代码更加易懂，并且大大减少了重复的代码，那么属性嵌套有什么优点呢？同样的，在css中我们书写的属性有些是用-连接起来的，比如：border-color、border-style、border-radius等等，像这些需要我们重复书写的border，完全可以使用属性嵌套来解决。话不多说，上代码

div{
    border: {  // 这里的花括号之前要加冒号
        left： 1px;
        style: solid;
        color: red;
    }
}

还可以指明例外的样式属性

div{
    border: 1px solid red {
    left: none
    }
}

文件导入

在css中引入css文件使用@import，sass中同样有这样的特性，不同之处在于：css中只有执行到@import的时候才会起请求加载导入的css文件，所以会比较慢；而在sass中，sass文件被编译成css文件时就已经把导入的文件加载到了当前文件中合成一个文件。但是如果你导入的文件后缀名是.css，那么等同于css的import。一般scss文件被导入时命名会采取以下划线开头的方式，这属于sass内部的一个约定，这种文件是用来被导入的，因此在编译成css文件时不会单独生成一个这样的css文件，并且导入时可以省略后缀名，也可以省略下划线，例如：导入一个文件名为_color.css的文件，写法：@import "color"。

这里要提到的是嵌套导入，但是在实际的开发过程中不常用。不同于原生的css，sass是可以在花括号内进行文件导入.

_buttonStyle.scss文件

.button{
    border-radius: 5px;
    corlor: green;
    width: 20px;
    height: 8px;
}

把上面文件嵌套在sass中

.agreenBtn{@import "buttonStyle"}

// 编译成css，如下：

.aggrenBtn{
    .button{
        border-radius: 5px;
        corlor: green;
        width: 20px;
        height: 8px;
    }
}

当只想对某一特定区域应用某种样式而不想全局有效的时候就可以采取上述这种方式。

混合器

混合器这一特性算是sass中比较强大的特性，它让sass写起来更具有灵活性（可以进行参数的传递），但是与sass中的函数还是有区别的，后面会讲到。
混合器使用@mixin来定义，我们定义一个左偏移代码块，这样后面所有需要用到左偏移样式的地方，都可以用@include来调用。

@mixin left-offset{
    margin-left: 10px;
    float: left;
}

div{
    @include left-offset
}

编译成css

div{
    margin-left: 10px;
    float: left;
}

那有同学说了，如果我有的地方想让margin-left为20,或者其他数值怎么办，是不是还要再定义一个代码块呢？
当然不需要啦，上面说过混合器有传递参数的功能，我们可以给已经定义好的混合器传递任意的参数，那应该如何改动呢～看下面：

@mixin left-offset（$offsetValue）{
    margin-left: $offsetValue;
    float: left;
}

div-one{
    @include left-offset(20px)
}

div-two{
    @include left-offset(15px)
}

下面的混合器在定义的时候，我们给它的参数赋值为10px，如果后面在调用的时候不传参，则会使用默认值。

@mixin left-offset（$offsetValue: 10px）{
    margin-left: $offsetValue;
    float: left;
}

继承

sass中可以减少代码的重复性除了使用混合器还有选择器的继承，继承是一个选择器可以继承另一个选择器的所有样式，通过标识符@exend实现，如下代码：

.tip{
    border: 1px solid gray {
    radius: 4px;
    }
}

.errorTip{
    @extend .tip;
    color: red;
}

.successTip{
    @extend .tip;
    color: green;
}

看了上面的代码，你可能会觉得这不是跟混合器很相似吗。在这里想强调下语义化的关系，当一个元素拥有的类属于另一个类，用继承这种方式最为合适了，比如：.errorTip， .tip。所以我们要在相应的场景下去使用sass的特性。

函数

函数与混合器的不同在于，函数可以在内部实现一些复杂的逻辑运算，并且用@extend返回一个值；而混合器中只是定义一些css样式。

$grid-width: 40px;
    $gutter-width: 10px;

@function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

上面总结的是sass中比较重要的一些特性，内容或许还不到位，有需要补充的地方尽管提出，互相学习～