更新時間:2023-01-10 來源:黑馬程序員 瀏覽量:
Sass是一種成熟且穩(wěn)定的CSS擴展語言,它有兩種語法格式。一種是最早的Sass語法格式,被稱為縮進格式(Indented Sass),通常簡稱“Sass”,是一種簡化格式。這種格式以“.sass”作為擴展名。
另一種語法格式是SCSS(SassyCSS),這種格式僅在CSS3語法的基礎(chǔ)上進行拓展,所有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生成時,變量會被它們的值所替代。之后,如果需要一個不同的值,只需要改變這個變量的值,那么所有引用此變量的地方生成的值都會隨之改變。