1-3. 變量名用中劃線還是下劃線分隔
sass
的變量名可以與css
中的屬性名和選擇器名稱相同,包括中劃線和下劃線。這完全取決于個人的喜好,有些人喜歡使用中劃線來分隔變量中的多個詞(如$highlight-color
),而有些人喜歡使用下劃線(如$highlight_color
)。使用中劃線的方式更為普遍,這也是compass
和本文都用的方式。
不過,sass
并不想強迫任何人一定使用中劃線或下劃線,所以這兩種用法相互兼容。用中劃線聲明的變量可以使用下劃線的方式引用,反之亦然。這意味著即使compass
選擇用中劃線的命名方式,這并不影響你在使用compass
的樣式中用下劃線的命名方式進行引用:
$link-color: blue;
a {
color: $link_color;
}
//編譯后
a {
color: blue;
}
在上例中,$link-color
和$link_color
其實指向的是同一個變量。實際上,在sass
的大多數地方,中劃線命名的內容和下劃線命名的內容是互通的,除了變量,也包括對混合器和Sass函數的命名。但是在sass
中純css
部分不互通,比如類名、ID或屬性名。
盡管變量自身提供了很多有用的地方,但是sass
基于變量提供的更為強大的工具才是我們關注的焦點。只有當變量與sass
的其他特性一起使用時,才能發揮其全部的潛能。接下來,我們將探討其中一個非常重要的特性,即規則嵌套。