Sass將css幾乎變成了一個編程語言,雖然平時幾乎用不到它編程語言的特性。但是了解一下還是十分有趣的。
1 這個是類似命名空間 text:
.btn {
text: {
decoration: underline;
transform :lowercase;
}
}
這個scss會被編譯成為
.btn{
text-decoration: underline;
text-transform :lowercase;
}
2
.sidebar{width: 100px;
.user & {width: 100px;}
}
就算在層疊里面,還是可以引用父元素
這樣在做覆蓋樣式的時候就不需要特地額外的寫一些class了
3
類似ruby的轉(zhuǎn)義符號
$side: top;
sup {
.post-#{$side} {color: green; }
}
4
需要注意的小地方:
.content {
.call {}
&.call {}
}
這兩者會被編譯成
.content .call {}
.content.call {} //注意,這個沒有空格,只有兩個class同時在的時候才生效
有了Sass,你可以輕松寫出讓人想抽你的代碼,所以掌握平衡很重要。