Sass語言怎樣聲明變量和引用變量？

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

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

1. 變量聲明

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

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

$highlight-color: #F90;

$highlight-color: #F90;

$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. 變量引用

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

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

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

如何下載和使用Normalize.css？【移動(dòng)web頁(yè)面開發(fā)】

什么是變量？JavaScript變量命名規(guī)范介紹    

黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)