Sass語(yǔ)言如何聲明和引用變量？

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

另一種語(yǔ)法格式是SCSS（SassyCSS），這種格式僅在CSS3語(yǔ)法的基礎(chǔ)上進(jìn)行拓展，所有CSS3語(yǔ)法在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語(yǔ)法沖突。

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

$highlight-color: #F90;

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

$highlight-color: #F90;

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

$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ì)隨之改變。

猜你喜歡：

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

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

使用static關(guān)鍵字如何定義成員變量？

傳智教育前端與移動(dòng)開發(fā)培訓(xùn)