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个参数的选择器来