变量声明和引用
声明:
任何可以用作css属性值的赋值都 可以用作sass的变量值
1 | $basic-border: 1px solid red; |
引用:
1 | .container { |
嵌套CSS规则
这一规则可以使我们避免书写重复的css选择器
sass:
1 | #content { |
编译后:
1 | #content article h1 { color: #333 } |
父选择器标识符&
当需要某个选择器应用到父选择器时,使用&标识符
sass:
1 | #content { |
编译后:
1 | article a { color: blue } |
群组选择器嵌套
sass:
1 | .container { |
相当于:
1 | .container h1, |
子选择器和同层组合选择器
嵌套属性
1 | nav { |
编译后:
1 | nav { |