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