1-2. 變量引用

凡是css屬性的標(biāo)準(zhǔn)值(比如說1px或者bold)可存在的地方，變量就可以使用。css生成時，變量會被它們的值所替代。之后，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//編譯后

.selected {
  border: 1px solid #F90;
}

看上邊示例中的$highlight-color變量，它被直接賦值給border屬性，當(dāng)這段代碼被編譯輸出css時，$highlight-color會被#F90這一顏色值所替代。產(chǎn)生的效果就是給selected這個類一條1像素寬、實心且顏色值為#F90的邊框。

在聲明變量時，變量值也可以引用其他變量。當(dāng)你通過粒度區(qū)分，為不同的值取不同名字時，這相當(dāng)有用。下例在獨立的顏色值粒度上定義了一個變量，且在另一個更復(fù)雜的邊框值粒度上也定義了一個變量:

$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屬性設(shè)置了一個1px $highlight-color solid的值是一樣的。最后，我們來了解一下變量命名的實用技巧，以結(jié)束關(guān)于變量的介紹。