Sass語言如何聲明和引用變量？

Sass是一種成熟且穩(wěn)定的CSS擴展語言，它有兩種語法格式。一種是最早的Sass語法格式，被稱為縮進格式（Indented Sass），通常簡稱“Sass”，是一種簡化格式。這種格式以“.sass”作為擴展名。

另一種語法格式是SCSS（SassyCSS），這種格式僅在CSS3語法的基礎上進行拓展，所有CSS3語法在SCSS中都是通用的，同時加入Sass的特色功能。這種格式以“.scss”作為擴展名。本節(jié)基于SCSS格式講解Sass的變量聲明和變量引用。

1. 變量聲明

Sass使用“$”符號來標識變量，如$highlight-color和$sidebar-width。需要注意的是，老版本的Sass使用“!”來標識變量。使用$符號的好處是更具美感，并且在CSS中并無他用，不會導致與現(xiàn)存或未來的CSS語法沖突。

Sass變量的聲明和CSS屬性的聲明比較相似，基本語法如下。

$highlight-color: #F90;

上述代碼表示變量$highlight-color的值是#F90。任何可以用作CSS屬性值的賦值都可以用作Sass的變量值，甚至是以空格或逗號分割多個屬性值，示例代碼如下。

$highlight-color: #F90;

上述代碼表示變量$highlight-color的值是#F90。任何可以用作CSS屬性值的賦值都可以用作Sass的變量值，甚至是以空格或逗號分割多個屬性值，示例代碼如下。

$basic-border: 1px solid black;
$plain-font: "Myriad Pro","Myriad","Helvetica","Neue","Helvetica";

與CSS屬性不同的是，變量可以在CSS規(guī)則塊定義之外存在。如果變量定義在CSS規(guī)則塊內(nèi)，那么該變量只能在此規(guī)則塊內(nèi)使用。如果它們出現(xiàn)在任何形式的{...}塊中，例如@media或者@font-face塊中，情況也是如此。

2. 變量引用

在變量定義完成之后，這時變量還沒有生效，除非引用這個變量。下面為大家講解變量的使用方法。示例代碼如下。

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

上述代碼中，凡是CSS屬性的標準值（如1px或者bold）可存在的地方，變量就可以使用。CSS生成時，變量會被它們的值所替代。之后，如果需要一個不同的值，只需要改變這個變量的值，那么所有引用此變量的地方生成的值都會隨之改變。

猜你喜歡：

什么是Sass？Sass的優(yōu)勢有哪些？

為什么要使用變量？使用變量的意義是什么？

使用static關鍵字如何定義成員變量？

傳智教育前端與移動開發(fā)培訓