sass笔记-3|Sass基础语法之样式复用和保持简洁

摘要：区别在于，类是在中运用的，混合器是在样式表中使用的。基本用法选择器继承，用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是，如果继承了，那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。

上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性，这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式都能复用样式，使用它们也不难，但一定要注意什么时候该用什么。

当你需要一直复用大段样式的时候，可以考虑下混合器。

混合器使用@mixin标识符定义，然后通过@include引入，简单的说就是用@mixin定义一个混合器，它具有一个名字和一堆包含在花括号中的规则，用@include引入这个混合器（通过混合器的名字），混合器中的样式规则就会被提取到调用@include的地方。

此外，混合器中也可以包含CSS规则，可以包含选择器和选择器中的规则，甚至可以用父选择器标识符&。

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

.notice{
    background-color:green;
    border:2px solid #0a0;
    @include rounded-corners;
}

//导出的css如下
.notice{
    background-color:green;
    border:2px solid #0a0;
    -moz-border-radius:5px;
    -webkit-border-redius:5px;
    border-radius:5px;
}

混合器复用样式的时候，可以通过传参改变混合器中的具体属性值，和function很像。

混合器定义时，参数名称必须以变量名形式指定，此外，可选的是，参数可以有默认值，只需要在参数名后面以冒号:分隔后写上默认属性值，如果你了解各类编程语言函数的默认参数值，这应该不会陌生。

引入含有参数的选择器时，有两种传入参数的形式，一种是仅仅传入参数值，这要求传入参数值的顺序和混合器定义的参数顺序一致，另一种则是通过$name:value的形式指定传入参数的名字和值，这就不要求顺序。

以下代码定义了一个有3个参数的选择器来设置一个链接各个状态的颜色样式，其中常规样式的颜色$normal有一个默认值#233，另外两个参数没有默认值：

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

当引入这个混合器的时候，可以有以下两种方式引入：

//可以这么引入，因为最后一个参数默认，可以不传入
a{
    @include link-col(red, gray);
}
//也可以这样，就不用管顺序
a{
    @include link-col($visited:gray, $hover:red);
}

如果发现一直在不停复用一段样式，应该考虑把这段样式构造成一个混合器，尤其是它本身可能是一组有意义的样式组合，并且考虑进参数的设置，让混合器更加智能。

判断一组选择器是否应该组合在一起组成一个混合器，一条经验法则：能否为这个混合器想出一个能概括它的好名字。如果能想出一个短名字来描述这几条样式组合的作用，那么往往能构造出一个合适的混合器。

混合器和CSS类很像，css类也可以复用样式，一段样式给一个类，然后那里需要这一段样式去修饰，就在哪里添加这个类。

区别在于，类是在HTML中运用的，混合器是在样式表中使用的。这意味着，“类”具有语义化的含义，而混合器仅仅是有关样式的，仅仅是描述展示出来是什么样子的。

能区分这两者微妙的区别，并且有意地去选择更合适的方式去复用样式，这能让你的代码保持可读性和可维护性。诚然，现在很多流行框架，依旧在用类去复用样式，但是语义和样式的解耦绝对是趋势。

刚描述完混合器和类的差别，在于“语义”和“展示样式”，又突然到了建立在语义化关系上复用样式的选择器继承，似乎有点绕，为什么不用类而要用选择器继承呢？

实际上，选择器继承最常用的场景就是和类一起工作的。

选择器继承，用@extend去继承一个选择器定义的所有样式。以下代码，.seriousError将会继承.error定义的所有样式。

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

//输出的CSS代码是这样的
.error, .seriousError{
    border: 1px red;
    background-color: #fdd;
}
.seriousError{
    border-width: 3px;
}

是的，平时我们完全可以写输出的纯CSS代码，多写一个选择器名字和多写一行@extend命令，我们觉得差不多。

但是，在上面的例子中，.seriousError不仅会继承.error自身的所有样式（就像上面的那样），任何和.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。

比如，在上面的样式代码是这样的：

.error{
    border: 1px red;
    background-color: #fdd;
}
.seriousError{
    @extend .error;
    border-width: 3px;
}
.error a{
    color:red;
    font-weight:bold;
}
h1.error{
    font-size:1.3em;
}

//输出的CSS是这样的，注意看下面的选择器
.error, .seriousError{
    border: 1px red;
    background-color: #fdd;
}
.seriousError{
    border-width: 3px;
}
.error a, .seriousError a{
    color:red;
    font-weight:bold;
}
h1.error, h1.seriousError{
    font-size:1.3em;
}

这个时候，如果我们不借助Sass的选择器继承，而用纯CSS来写，是不是就会有一些繁琐了。

我们再来想一下这几段代码的含义：我们描述了一个.error类来整体修饰错误提示都应该有的样式，然后.seriousError是.error类的细化，描述了一个严重的错误应该有的进一步的样式。所以.seriousError应该有.error相关的所有样式，而这就是选择器继承帮助我们做的事。

@extend背后最基本的想法是，如果.seriousError继承了.error，那么样式表中的任何一处.error选择器都会用.error, .seriousError这一选择器组进行替换和打开。

继承是建立在语义化的关系上的，当一个元素拥有的类表明它是属于另一个类时（是另一个类的细化时），在这种情况下需要复用样式时使用，它的本质作用还是样式复用。

它和混合器相比，继承生成的代码量会相对较少，因为继承仅仅重复选择器，而混合器是重复一段样式。

另外，可以看到，一般它和类一起协同工作，当你在构建一些有关系的类时，在写这些具有层级关系的类的样式的时候，选择器继承可以帮你严谨地完成某些样式的复用，无论是这个选择器本身，还是隐藏在其他复杂选择器中的目标选择器。

既然这被称为选择器继承，不是“类”继承，那么必然继承是可以针对类之外的选择器使用的，只是继承类是最常用的使用场景。

还有一种场景是，继承一个HTML元素的样式，如定一个.disabled类，样式修饰让它看上去像一个灰掉的链接，通过继承a这一元素实现：

.disabled{
    color: gray;
    @extend a;
}

还有一些关于复杂选择器的继承规则：

如果继承了一个复杂的选择器，那么只会继承这个复杂选择器命中的样式， 比如.seriousError @extend .important.error，那么被继承的.important.error被看做一个整体，多带带的.important或者.error是不会被继承的；

如果一个选择器序列继承了另一个选择器，那么只会完全命中序列选择器的才会继承，比如(#main .seriousError) @extend .error（最好不要这么做），那么前者的#main .seriousError也被看做一个整体，只有完全命中这个选择器的才会继承；

以逗号分隔的选择器序列是不能被继承的，因为这和继承其中任何一个选择器效果一样。

可以放心地继承有后代选择器修饰的选择器，但不用用后代选择器去继承别的选择器。即放心地用.serious { @extend (.main .error) }，但是不要用.something .serious { @exten .error }。

为什么，因为不这么做可能会导致继承迅速变复杂，sass可能会遗漏一些情况，考虑：

.foo .bar { @extend .baz; }
.bip .baz { a:b; }

当下面那条规则应用到.foo .bar时，有3种情况:

    

        
...
    



    

        
...
    



    
...

所以sass必须要生成3种组合选择器才能覆盖这3种情况，但遗憾的是，sass并不总是会生成所有情况，另外，这样做，选择器的个数会迅速增加，所以最好的方式是不要这么用。

Sass保持样式复用和简洁的两个方式，一是混合器，混合器主要用于样式展示层的复用，可以给混合器传参从而在复用代码的同时保持灵活性，二是选择器继承，一般和类一起使用，主要用于建立在语义化关系上的样式复用，注意继承可能引发的问题。