Sass将css几乎变成了一个编程语言，虽然平时几乎用不到它编程语言的特性。但是了解一下还是十分有趣的。
1 这个是类似命名空间 text:
1
2
3
4
5
6
| .btn {
text: {
decoration: underline;
transform :lowercase;
}
}
|
这个scss会被编译成为
1
2
3
4
| .btn{
text-decoration: underline;
text-transform :lowercase;
}
|
2
1
2
3
| .sidebar{width: 100px;
.user & {width: 100px;}
}
|
就算在层叠里面，还是可以引用父元素
这样在做覆盖样式的时候就不需要特地额外的写一些class了
3
类似ruby的转义符号
1
2
3
4
| $side: top;
sup {
.post-#{$side} {color: green; }
}
|
4
需要注意的小地方:
1
2
3
4
| .content {
.call {}
&.call {}
}
|
这两者会被编译成
1
2
| .content .call {}
.content.call {} //注意，这个没有空格，只有两个class同时在的时候才生效
|
有了Sass，你可以轻松写出让人想抽你的代码，所以掌握平衡很重要。