sass变量
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變量
總結
- 上一篇： HTML5与CSS3权威指南笔记案例1
- 下一篇： html常用小知识