教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

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

更新時(shí)間:2021年05月12日14時(shí)06分 來(lái)源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育,不一樣的品質(zhì)

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)來(lái)標(biāo)識(shí)變量,如$highlight-color和$sidebar-width。需要注意的是,老版本的Sass使用“!”來(lái)標(biāo)識(shí)變量。使用$符號(hào)的好處是更具美感,并且在CSS中并無(wú)他用,不會(huì)導(dǎo)致與現(xiàn)存或未來(lái)的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í)變量還沒(méi)有生效,除非引用這個(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)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!