Sass 基礎教程

簡介

參考：

• Sass: Documentation
• Sass教程 Sass中文文檔 | Sass中文網
• Sass: Sass Basics
• Sass基礎教程 Sass快速入門 Sass中文手冊 | Sass中文網
• SASS Tutorial

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 variables、嵌套 nested rules、混合 mixins、導入 inline imports 等高級功能，這些拓展令編寫 CSS 高效和優雅，更好地組織管理樣式文件。

Sass 全稱爲 Syntactically Awesome Style Sheets 即只是在句法上重構了樣式表，相似於添加了一層語法糖，瀏覽器並不能直接識別該文件，所以須要使用編譯器將 .scss 或 .sass 文件編譯爲 .css 文件。

配置環境

用多種方法配置編譯環境，能夠在 官網 下載安裝編譯器（推薦使用跨平臺的編譯器 Prepros 免費版），或手動配置編譯環境使用命令行編譯。

注意：因爲 Sass 基於 Ruby 開發，所以在 Windows 系統中使用命令行編譯時須要安裝 Ruby。

提示；若是開發使用的編輯器是 VS Code 能夠安裝插件 Live Sass Compiler 和 Live Server 實現實時編譯。

編譯

若是使用編譯器，須要將項目添加到編譯器中，並啓動 Auto Compile；若是使用 VS Code 的插件 Live Sass Compiler 則點擊狀態欄的 Watch Sass，便可實現實時編譯。當 .scss 文檔修改後保存，便可自動同步生成同名的 .css 文檔。在 HTML 文檔中連接相應的 .css 文檔便可應用樣式。

註釋

在 Sass 中使用符號 // annotation 添加註釋，而不須要像 CSS 中使用 /* annotation */ 麻煩地將註釋包裹起來。

變量

sass 讓人們受益的一個重要特性支持變量，經過變量存儲 經常使用的 CSS 屬性值，如顏色、字體樣式，而後經過變量名來引用它們，而無需重複書寫且方便後續的維護。

使用符號 $ 聲明變量，相似於 CSS 語法經過冒號來綁定值，如 $highlight-color: #F90;，支持綁定多個屬性值並以空格分隔，如 $basic-border: 1px solid black;

提示：與 CSS 屬性不一樣，變量通常定義在規則集以外（當變量定義在 CSS 規則塊內，或任何 {...} 形式的塊中，那麼該變量只能在此規則塊內使用），並且經常使用單獨的 variables.scss 文檔保存，並經過導入文件的方式使用預設的變量。

只須要經過 $variable-name 便可引用變量，編譯後在生成的 CSS 文檔中變量會被替換爲相應的值。

$highlight-color: #F90;

.selected {
  border: 1px solid $highlight-color;
}
複製代碼

🔨編譯後

.selected {
  border: 1px solid #F90;
}
複製代碼

提示：變量能夠複用，而須要修改樣式時只對變量值進行修改，則全部引用該變量的元素樣式值都會在編譯後自動更新，十分便於維護 提示：爲變量命名一個合適的名稱十分便於理解和使用 提示：在聲明變量時，變量值也能夠引用其餘變量

插值

使用 #{$varName} 形式將變量值插入到其餘數據之中，以組合爲新的數據，

@mixin corner-icon($name) {
    .icon-#{$name} {
        background-image: url("/icons/#{$name}.svg")
    }
}

@include corner-icon("mail")
複製代碼

🔨編譯後

.icon-mail {
  background-image: url("/icons/mail.svg");
}
複製代碼

嵌套 CSS 規則

因爲 CSS 不容許嵌套規則集，而 HTML 元素倒是嵌套式樹結構的，所以針對頁面一個區域進行樣式設置時，每每須要同時爲容器元素及其子元素編寫特定樣式，則須要分別使用不一樣的選擇器一條條列出規則集。

Sass 則支持像俄羅斯套娃那樣在規則塊中嵌套規則塊爲子元素設置樣式，這種能力可避免重複書寫選擇器並提升了可讀性（編譯器則自動把這些嵌套規則分離，並填補父類選擇器，構建爲一條條 CSS 規則集）。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
複製代碼

🔨編譯後

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
複製代碼

通常狀況下 Sass 編譯器在解開一個嵌套規則時就會把父選擇器，如 #content，經過一個空格鏈接到子選擇器的前邊，如 article和 aside 造成 #content article 和 #content aside

注意：雖然 Sass 支持規則集嵌套，可是應該避免濫用該特性，最多隻應該使用二層嵌套，不然過多的深層嵌套會使代碼難以維護。

父類選擇器標識符

當嵌套的樣式是爲告終合僞類選擇器爲當前元素添（而非爲嵌套的子元素）加特定狀態的樣式時，則須要使用 Sass 特有的父類選擇器 &

article a {
  color: blue;
  &:hover { color: red }
}
複製代碼

🔨編譯後

#content aside {
    article a { color: blue }
    article a:hover { color: red }
}
複製代碼

組合選擇器

在設置嵌套樣式時，默認使用後代選擇器，當也支持使用組合選擇器匹配其餘層級的對象：

• 使用符號 > 建立子類選擇器：匹配一個直接子元素
• 使用符號 + 或 ~ 建立同級選擇器：匹配下一個相鄰的同級元素或如下全部同級元素

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
複製代碼

🔨編譯後

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
複製代碼

Mixin 混合器

除了使用變量來複用一個數據值，Sass 支持複用樣式集合，使用 @mixin 標識符並定義自定義 snippets 代碼片斷，也稱爲混合器，並在其後添加一個名稱，代碼片斷則包含在 {} 內。

能夠在你的樣式表中經過關鍵字 @include 並結合相應的名稱來引用這個混合器。

提示：Mixin 看上去很像其餘的 CSS @ 標識符，如 @media 或者 @font-face，也是定義有特殊功能的一個代碼片斷 提示：Mixin 中能夠不編寫任何代碼，經過 @content 標識符進行佔位，在使用時再進行樣式設置（視頻示例中結合媒體查詢使用） 提示：通常將 Mixin 代碼片斷單獨存儲在一個 mixin.scss 文檔中，並經過導入的方式引用到其餘樣式表中 注意：大量的重用可能會致使生成的樣式表過大，致使加載緩慢。應該合理地構形成優良的混合器，一條經驗法則就是可否爲這個混合器想出一個好的名字，並且使用語義化的名稱亦能夠避免重複使用混合器。

給混合器傳遞參數

混合器並不必定總得生成相同的樣式。能夠在定義 @mixin name($parameter) 添加形參，並在調用時 @include name(argument) 傳遞實參以實現更精確的樣式，這個功能和 JS 的函數相似。

// 定義混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 調用
a {
  @include link-colors(blue, red, green);
}
複製代碼

🔨編譯後

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
複製代碼

導入文件

相似於 CSS 的 @import 規則，Sass 也容許使用 @import 規則將其餘樣式表或 .scss 文檔引入噹噹前文檔中，但不一樣的是 CSS 文件中導入的其餘 CSS 文件只有執行到 @import 時瀏覽器纔會去下載導入相應的文件，這致使頁面加載起來特別慢；而 Sass 在編譯生成 .css 文件時就把相關文件導入，即全部相關的樣式代碼被概括複製到了同一個 .css 文件中，而無需發起額外的下載請求。

// 導入名爲 mixins 後綴爲 .scss 文檔裏的代碼到當前文件中
@import "mixins"
複製代碼

提示：使用 @import "file-name" 規則導入文件時並不須要指明後綴，編譯器會自動尋找匹配後綴合適的文檔

數值運算

Sass 支持數值運輸，如 +、-、*、/ 等，通常放置在括號中其運算結果就做爲屬性值。

.icon {
    width: (100% / 3);
}
複製代碼

內建模塊

Sass 提供了許多內置模塊，包含一些預設的功能（相似於函數同樣）或 mixin，以供開發者直接調用。

經常使用的顏色函數：

• lighten($color, $amount) 基於參數 $amount（範圍從 0% - 100%）和顏色 $color 計算出一個更淺的顏色
• complement($color) 計算出顏色 $color 的互補色