$nav-color:#F90; 声明变量
nav {
$width:100px;
width:$width;
color:$nav-color;
}
使用一个特殊的sass选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号
article a {
color:blue;
&:hover { color:red }
}
减少代码
处理这种群组选择器规则嵌套上的强大能力,正是sass在减少重复敲写方面的贡献之一
.container h1, .container h2, .container h3 {margin-bottom:.8em}
=》 .container {
h1, h2, h3 {margin-bottom: .8em}}
在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:
nav{
border: {
style: solid;width:1px;color:#ccc;
}}
混合器使用@mixin标识符定义,可以在你的样式表中通过@include来使用这个混合器,混合器还可以传递参数
继承 因为继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上。当一个元素拥有的类(比如说.seriousError)表明它属于另一个类(比如说.error),这时使用继承再合适不过了