一般情況下,你反復聲明一個變量,只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明:
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
在上邊的例子中,超鏈接的color
會被設置為red
。這可能并不是你想要的結果,假如你寫了一個可被他人通過@import
導入的sass
庫文件,你可能希望導入者可以定制修改sass
庫文件中的某些值。使用sass
的!default
標簽可以實現(xiàn)這個目的。它很像css
屬性中!important
標簽的對立面,不同的是!default
用于變量,含義是:如果這個變量被聲明賦值了,那就用它聲明的值,否則就用這個默認值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
在上例中,如果用戶在導入你的sass
局部文件之前聲明了一個$fancybox-width
變量,那么你的局部文件中對$fancybox-width
賦值400px
的操作就無效。如果用戶沒有做這樣的聲明,則$fancybox-width
將默認為400px
。
接下來我們將學習嵌套導入,它允許只在某一個選擇器的范圍內(nèi)導入sass
局部文件。
更多建議: