1-2. 變量引用

凡是css屬性的標(biāo)準(zhǔn)值(比如說(shuō)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)你通過(guò)粒度區(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的值是一樣的。最后，我們來(lái)了解一下變量命名的實(shí)用技巧，以結(jié)束關(guān)于變量的介紹。