[Sass]值列表

所謂值列表(lists) 是指Sass 如何處理CSS 中:

margin: 10px 15px 0 0

或者:

font-face: Helvetica, Arial, sans-serif

像上面這樣通過空格或者逗號分隔的一系列的值。

事實上,獨立的值也被視為值列表——只包含一個值的值列表。

Sass列表函數(Sass list functions)賦予了值列表更多功能(Sass進級會有講解):

  1. nth函數(nth function)可以直接訪問值列表中的某一項;
  2. join函數(join function)可以將多個值列表連結在一起;
  3. append函數(append function)可以在值列表中添加值;
  4. @each規則(@each rule)則能夠給值列表中的每個項目添加樣式。

值列表中可以再包含值列表,比如1px 2px, 5px 6px 是包含1px 2px 與5px 6px 兩個值列表的值列表。如果內外兩層值列表使用相同的分隔方式,要用圓括號包裹內層,所以也可以寫成(1px 2px) (5px 6px)。當值列表被編譯為CSS 時,Sass 不會添加任何圓括號,因為CSS 不允許這樣做。(1px 2px) (5px 6px)與1px 2px 5px 6px 在編譯後的CSS 文件中是一樣的,但是它們在Sass 文件中卻有不同的意義,前者是包含兩個值列表的值列表,而後者是包含四個值的值列表。

可以用() 表示空的列表,這樣不可以直接編譯成CSS,比如編譯font-family: ()時,Sass 將會報錯。如果值列表中包含空的值列表或空值,編譯時將清除空值,比如1px 2px () 3px 或1px 2px null 3px。

results matching ""

    No results matching ""