網路安全 演習
您應該已經瞭解的內容
在繼續之前,您應該對以下內容有一個基本的瞭解:
- HTML
- CSS
如果您想先學習這些主題,請在我們首頁上查詢教程。
什麼是 Sass?
- Sass 代表 Syntactically Awesome Stylesheet (語法上很棒的樣式表)
- Sass 是 CSS 的一個擴充套件
- Sass 是一個 CSS 預處理器
- Sass 與所有 CSS 版本完全相容
- Sass 減少了 CSS 的重複,因此節省了時間
- Sass 由 Hampton Catlin 設計,並於 2006 年由 Natalie Weizenbaum 開發
- Sass 可免費下載和使用
為什麼使用 Sass?
樣式表越來越龐大、複雜,並且越來越難以維護。這時 CSS 預處理器就能派上用場。
Sass 允許您使用 CSS 中不存在的功能,如變數、巢狀規則、混合(mixins)、匯入、繼承、內建函式以及其他內容。
一個簡單的示例,說明 Sass 有多有用
假設我們有一個網站,有三種主色
#a2b9bc
#b2ad7f
#878f99
那麼,您需要輸入多少次這些 HEX 值?非常多次。那相同的顏色變體呢?
與其多次輸入上述值,不如使用 Sass,並編寫如下程式碼
Sass 示例
/* 定義主色變數 */
$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 並且主色發生變化時,您只需要在一個地方進行更改。
Sass 如何工作?
瀏覽器不理解 Sass 程式碼。因此,您需要一個 Sass 預處理器來將 Sass 程式碼轉換為標準的 CSS。
這個過程稱為轉譯(transpiling)。所以,您需要給一個轉譯器(某種程式)一些 Sass 程式碼,然後得到一些 CSS 程式碼。
提示:轉譯(Transpiling)是指將一種語言編寫的原始碼轉換為/翻譯成另一種語言。
Sass 檔案型別
Sass 檔案具有“.scss”副檔名。