建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)SASS教程:1-2.變量引用
凡是css屬性的標準值(比如說1px或者bold)可存在的地方，變量就可以使用。css生成時，變量會被它們的值所替代。之后，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//編譯后
.selected {
border: 1px solid #F90;
}
看上邊示例中的$highlight-color變量，它被直接賦值給border屬性，當這段代碼被編譯輸出css時，$highlight-color會被#F90這一顏色值所替代。產(chǎn)生的效果就是給selected這個類一條1像素寬、實心且顏色值為#F90的邊框。
在聲明變量時，變量值也可以引用其他變量。當你通過粒度區(qū)分，為不同的值取不同名字時，這相當有用。下例在獨立的顏色值粒度上定義了一個變量，且在另一個更復雜的邊框值粒度上也定義了一個變量:
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//編譯后
.selected {
border: 1px solid #F90;
}這里，$highlight-border變量的聲明中使用了$highlight-color這個變量。產(chǎn)生的效果就跟你直接為border屬性設置了一個1px $highlight-color solid的值是一樣的。最后，我們來了解一下變量命名的實用技巧，以結束關于變量的介紹。
網(wǎng)站名稱：創(chuàng)新互聯(lián)SASS教程:1-2.變量引用
文章出自：http://m.5511xx.com/article/codijis.html
