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