簡(jiǎn)介
您應(yīng)該知道的
在繼續(xù)之前，您應(yīng)該對(duì)以下內(nèi)容有基本的了解：
- HTML
- CSS
如果您想先學(xué)習(xí)這些科目，請(qǐng)?jiān)谖覀兊?主頁(yè) 上訪(fǎng)問(wèn)這些教程。
什么是 Sass？
- Sass 指的是 Syntactically Awesome Stylesheet（語(yǔ)法超棒的樣式表）
- Sass 是一種 CSS 擴(kuò)展
- Sass 是一種 CSS 預(yù)處理器
- Sass 完全兼容所有版本的 CSS
- Sass 減少了 CSS 的重復(fù)，從而節(jié)省了時(shí)間
- Sass 由 Hampton Catlin 設(shè)計(jì)，并由 Natalie Weizenbaum 于 2006 年開(kāi)發(fā)
- Sass 可以免費(fèi)下載和使用
為什么要使用 Sass？
樣式表越來(lái)越大、越來(lái)越復(fù)雜，也越來(lái)越難維護(hù)。這是 CSS 預(yù)處理器可以提供幫助的地方。
Sass 允許您使用 CSS 中不存在的特性，比如變量、嵌套規(guī)則、mixin、導(dǎo)入、繼承、內(nèi)置函數(shù)和其他功能。
一個(gè)關(guān)于 Sass 很有用的簡(jiǎn)單例子
假設(shè)我們有一個(gè)具有三種主要顏色的網(wǎng)站：
#a2b9bc #b2ad7f #878f99那么，您需要鍵入這些 HEX 值多少次？很多次。如果相同的顏色發(fā)生變化呢？
您可以使用 Sass 寫(xiě)以下代碼，而不是多次鍵入上面的值：
Sass 實(shí)例
/* 為原始顏色定義變量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用變量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
所以，在使用 Sass 的時(shí)，如果原始顏色發(fā)生變化，你只需要在一個(gè)地方更改它。
Sass 是如何工作的？
瀏覽器不理解 Sass 代碼。因此，您需要一個(gè) Sass 預(yù)處理器來(lái)將 Sass 代碼轉(zhuǎn)換為標(biāo)準(zhǔn) CSS。
這個(gè)過(guò)程稱(chēng)為轉(zhuǎn)譯（transpiling）。所以，您需要為轉(zhuǎn)譯器（某種程序）提供 Sass 代碼，然后取回 CSS 代碼。
提示：轉(zhuǎn)譯是一個(gè)術(shù)語(yǔ)，用于將用一種語(yǔ)言編寫(xiě)的源代碼轉(zhuǎn)換/翻譯成另一種語(yǔ)言。
Sass 文件類(lèi)型
Sass 文件的文件擴(kuò)展名是 ".scss"。
Sass 評(píng)論
Sass 支持標(biāo)準(zhǔn)的 CSS 注釋 /* comment */，此外還支持行內(nèi)注釋 // comment：
Sass 實(shí)例
/* 定義主要的顏色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用變量 */
.main-header {
background-color: $primary_1; // 您可以在這里添加行內(nèi)的評(píng)論
}