值列表

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

margin: 10px 15px 0 0

或者:

font-face: Helvetica, Arial, sans-serif

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

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

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

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

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、Sass的語法格式及編譯調(diào)試 1. Sass和scss的區(qū)別 本質(zhì)上來說是同一個東西,只是語法上有細微的差異:...
    沒汁帥閱讀 1,481評論 0 5
  • 聲明變量 定義變量的語法: 在有些編程語言中(如,JavaScript)聲明變量都是使用關(guān)鍵詞“var”開頭,但是...
    Junting閱讀 1,529評論 0 6
  • 基礎(chǔ) 聲明變量 普通變量 默認變量 變量覆蓋:只需要在默認變量之前重新聲明下變量即可 變量的調(diào)用 局部變量和全局變...
    Jill1231閱讀 1,385評論 0 1
  • 1、SCSS 是 Sass 的新語法格式,從外形上來判斷他和 CSS 長得幾乎是一模一樣,代碼都包裹在一對大括號里...
    夜幕小草閱讀 1,809評論 2 10
  • 最近,“江歌案”又被重新提起,案件主人公之一劉鑫也被推上輿論的風(fēng)口浪尖。 事件人物:被殺女孩江歌、江歌母親江媽媽、...
    彪悍姐閱讀 879評論 2 1

友情鏈接更多精彩內(nèi)容