SCSS 變數的宣告

使用$符號可以標識一個變數，程式碼如下:

[Scss] 純文字檢視 複製程式碼
$highlight-color

在比較早的版本中，使用!來標識一個變數，之所以改為$，也許是因為美元符號比較美觀。

一.變數宣告:

變數宣告與css的屬性宣告非常的類似，程式碼如下:

[Scss] 純文字檢視 複製程式碼
$highlight-color: #F90;

上面的程式碼表示宣告一個$highlight-color變數，並賦值為#F90。

任何可以用作css屬性值的賦值都可以用作sass的變數值，甚至是以空格分割的多個屬性值，例如:

[Scss] 純文字檢視 複製程式碼
$basic-border: 1px solid black;

或以逗號分割的多個屬性值，例如:

[Scss] 純文字檢視 複製程式碼
$plain-font:sans-serif; sans-serif;

這時變數還沒有生效，除非你引用這個變數。

二.變數的引用:

變數的應用有一個原則，那就是標準css屬性值存在的地方，變數就可以存在。

當編譯成css檔案的時候，變數會被變數值所替代。當要修改css的一個屬性值時，只要修改對應的變數值即可，沒有必要處處修改，這也是scss的優點之一。

scss程式碼如下:

[Scss] 純文字檢視 複製程式碼
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

上面的程式碼宣告一個變數$highlight-color並賦值#F90，然後在後面的程式碼中進行引用。

編譯後程式碼如下:

[CSS] 純文字檢視 複製程式碼
.selected {
  border: 1px solid #F90;
}

在宣告變數的時候，還可以再引用其他變數，程式碼如下:

[Scss] 純文字檢視 複製程式碼
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.selected {
  border: 1px solid #F90;
}