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

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

零. 混合器——样式层上复用

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

1. 基本用法

混合器使用@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;
}

2. 可以给混合器传参

混合器复用样式的时候，可以通过传参改变混合器中的具体属性值，和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);
}

3. 混合器的使用场景——注意和类的区别

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

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

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

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

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

一. 选择器继承——语义化关系上复用样式

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

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

1. 基本用法

选择器继承，用@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相关的所有样式，而这就是选择器继承帮助我们做的事。

2. 继承背后的基本实现思路

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

3. 继承的使用场景

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

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

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

4. 继承的高级用法

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

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

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

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

如果继承了一个复杂的选择器，那么只会继承这个复杂选择器命中的样式，比如.seriousError @extend .important.error，那么被继承的.important.error被看做一个整体，单独的.important或者.error是不会被继承的；
如果一个选择器序列继承了另一个选择器，那么只会完全命中序列选择器的才会继承，比如(#main .seriousError) @extend .error（最好不要这么做），那么前者的#main .seriousError也被看做一个整体，只有完全命中这个选择器的才会继承；
以逗号分隔的选择器序列是不能被继承的，因为这和继承其中任何一个选择器效果一样。

5. 使用继承时注意后代选择器

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

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

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

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

<div class="foo">
    <div class="bip">
        <div class="bar">...</div>
    </div>
</div>

<div class="bip">
    <div class="foo">
        <div class="bar">...</div>
    </div>
</div>

<div class="bip foo">
    <div class="bar">...</div>
</div>

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