一 静默注释
注释可以作为简单的样式说明,解释你当时为什么这样写,但是你不一定希望浏览网站的每个人都能看到你的注释,sass提供一种注释方式,当在生成css时会自动抹去注释,即使用//进行注释,而使用/* */进行注释时则会在css文件中显示注释,除非/* */使用在原生css不该放置的地方,如属性和选择器中,注释会被抹去。
二 混合器
当你的工程中需要重复使用大量相同的样式时,单单使用变量是无法解决的,这时可以使用混合器(标示符为@mixin)来使用重复的样式,在调用处使用@include+name进行调用,此时相当于把@mixin里面的样式放在@include的位置上,但是过量的使用混合器会导致样式表过大,加载缓慢,所以首先我们要了解使用场景。
1.何时使用
当你发现自己在重复使用一段样式,那么就应该构建一个优良的混合器,尤其是这段样式本身就是一个逻辑单元,比如是放在一起有意义的一组属性,对于何时使用这个问题,经验之谈就是你很容易为你的混合器起名字,因为你的混合器最好是用来实现某个具体样式的,如rounded-corners,使用语义化命名更加便于使用。
2.选择器的css规则
选择器里面不仅可以包含属性,也可以包含css规则,如选择器和选择器中的属性,甚至可包含父选择器标示符&。
3.混合器传参或默认
混合器传参:@include可以像javascript的函数一样进行传参,可以直接传入,也可以使用$name: value的形式,这样的话,不需要按照原参数顺序指定value,举例如下:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
默认参数值:传入的参数值可以是默认的,举例如下:
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
若调用@include link-colors(red) 那么$hover, $visited会被自动赋值为red。
三 选择器继承
选择器继承是指一个选择器可以继承另一个选择器的所有样式,使用@extend+name实现,选择器的继承不仅实现继承本身的样式,也会继承与之组成的组合选择器的样式。
1.何时使用继承
一般继承建立在语义化的基础上,当一个类明显属于另一个类时,使用继承再合适不过了。
2.用法
可以继承一个html元素的样式,在继承时,若@extend后面是.important.error那么只会继承这两个类下面的共有的样式,不会分别继承.important 和.error下的样式。
3.细节
继承比混合器所占体积更小,会使得站点的速度更快,当使用继承发生样式冲突时,按照层叠的规则选择。
4.最佳实践
不要使用后代选择器去继承,否则css选择器中的数量很快就会失控。