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;
}

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

1. 若是继承了一个复杂的选择器，那么只会继承这个复杂选择器命中的样式， 好比.seriousError @extend .important.error，那么被继承的.important.error被看作一个总体，单独的.important或者.error是不会被继承的；
2. 若是一个选择器序列继承了另外一个选择器，那么只会彻底命中序列选择器的才会继承，好比(#main .seriousError) @extend .error（最好不要这么作），那么前者的#main .seriousError也被看作一个总体，只有彻底命中这个选择器的才会继承；
3. 以逗号分隔的选择器序列是不能被继承的，由于这和继承其中任何一个选择器效果同样。

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并不老是会生成全部状况，另外，这样作，选择器的个数会迅速增长，因此最好的方式是不要这么用。

三. 小结

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