上一篇详述了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个参数的选择器来设置一个链接各个状态的颜色样式,其中常规样式的颜色<