sass變量用法
1、sass變量必須以$符開頭,后面緊跟著變量名
2、變量值和變量名之間就需要使用冒號(:)分隔開(就像CSS屬性設置一樣)
3、如果值后面加上!default則表示默認值
?默認變量
sass的默認變量:僅需要在值后面加上!default即可。
scss.style
css.style
默認變量解說:
sass的默認變量:
一般是用來設置默認值,然后根據需求來覆蓋的
覆蓋方式:
只需要在默認變量之前重新聲明下變量即可
編譯后的line-height為2,而不是我們默認的1.5。
?普通變量
sass的普通變量:定義之后可以在全局范圍內使用。
scss.style
css.style
特殊變量
定義的變量都為屬性值,可直接使用,但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。
scss.style
css.style
?多值變量
多值變量分為list類型和map類型:
list類型有點像js中的數組
map類型有點像js中的對象
list
list數據可通過空格,逗號或小括號分隔多個值,可用nth($var,$index)取值。關于list數據操作還有很多其他函數如length($list),join($list1,$list2,[$separator]),append($list,$value,[$separator])等,具體可參考sass Functions(搜索List Functions即可)
定義
scss.style
css.style
map
map數據以key和value成對出現,其中value又可以是list。
格式為:$map: (key1: value1, key2: value2, key3: value3);。
可通過map-get($map,$key)取值。
關于map數據還有很多其他函數如map-merge($map1,$map2),map-keys($map),map-values($map)等,具體可參考sass Functions(搜索Map Functions即可)
定義
scss.style
css.style
?全局變量
在變量值后面加上!global即為全局變量。
這個目前還用不上,不過將會在sass 3.4后的版本中正式應用。目前的sass變量范圍飽受詬病,所以才有了這個全局變量。
目前變量機制
在選擇器中聲明的變量會覆蓋外面全局聲明的變量。(這也就人們常說的sass沒有局部變量)
scss.style
css.style
啟用global之后的機制
請注意,這個目前還無法使用,所以樣式不是真實解析出來的。
scss.style
css.style
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=i2b12j&title=sass變量