Sass 變量

1. 前言

Sass 為 CSS 引入了變量這一功能，在實際項目中使用最普遍的除了 Sass 嵌套 就是 Sass 變量了，你可以把 CSS 的某個屬性值定義為變量，然后在項目中任何需要它的地方來使用它。本節(jié)主要講解 Sass 變量的主要語法：變量的聲明、引用、作用域等，同時還會講解在實際項目中一般是如何來維護 Sass 變量的。

2. 什么是 Sass 變量 ?

我們在 Sass 簡介中提到 Sass是 CSS的擴展語言，變量是 CSS的擴展功能。
舉個例子，假如我們項目中很多地方要設(shè)置一個字體顏色為紅色，那么我們完全可以把這個顏色抽出來作為一個變量，然后在需要設(shè)置字體顏色的地方引用這個變量。這樣有一個好處就是，假如產(chǎn)品大大說要修改所有字體顏色的時候，我們就不需要每處都去修改了，直接更改變量的值就 OK 了，我們用 Sass 代碼來直觀的感受下：

$variable: red;

.title {
  color: $variable;
}
h1 {
  color: $variable;
}

可以看到上面的代碼，我們定義了 $variable 這個變量，然后在多個元素的樣式中使用它，那么變量的值都可以是什么呢？這個一定要記住，變量的值可以是：

• 字符串
• 數(shù)字
• 顏色值
• 布爾值
• 列表
• Null 值

下面我們將詳細的講解 Sass 變量的語法。

3. 語法詳情

我們首先看下這段使用 Sass 變量的代碼編譯為 CSS 是什么樣的：

$variable: red;

.title {
  color: $variable;
}
h1 {
  color: $variable;
}

編譯為 CSS 的代碼是：

.title {
  color: red;
}

h1 {
  color: red;
}

下面我將從變量的聲明開始，逐一講解 Sass 變量的語法。

3.1 變量的聲明

如果你熟悉 javascript 的話，你應(yīng)該更好理解什么是變量，那么在 Sass 中也一樣，我們都需要對變量進行聲明！Sass 的變量聲明 和 CSS 屬性聲明很像，Sass 變量以 $ 開始，例如我們聲明一個用于字體顏色的變量：$font-color: #ffffff; 我們聲明的變量是 $font-color ，它的值是 #ffffff (顏色值)。

要知道，任何 CSS 屬性的賦值，都可以用于 Sass 變量的值，比如在 CSS 中定義 border 屬性的值為 1px solid #000000 , 那么 1px solid #000000 這個值也可以用于 Sass 變量的值，下面舉幾個例子直觀地看下：

$font-family: "YaHei"、"Myriad Pro"; // 字體的屬性值
$color: red; // 顏色的屬性值
$width: 20px; // 寬度的屬性值
$border: 1px solid #000000; // border的屬性值
$use-flex-grow: 1; // flex-grow的屬性值

從上面的代碼可以看出，任何 CSS 的屬性值都可以作為 Sass 變量的值，值得一提的是，這段代碼只是對變量進行了聲明而已，并沒有使用變量，只有你使用這個變量的時候它才會生效！所以接下來我們開始講解變量的引用。

小知識：舊版本的 Sass 使用 ! 來聲明變量，比如 !variable ; 要知道在 CSS 中有一種提升優(yōu)先級的方式是 !important ，可能 Sass 官方團隊認(rèn)為使用 ! 可能會導(dǎo)致和 CSS 語法的沖突，所以后來改為了使用 $ 來聲明變量。

3.1.1 變量的命名

• 變量盡量使用語義化的方式來進行命名，比如整個項目的主體顏色，我們定義變量名為 $theme-color，頁面中的主要邊框顏色，我們定義為 $main-border-color 等等，這種語義化的命名更方便維護同時也更利于其他開發(fā)人員理解。
• 變量名是使用中劃線 “-” 還是下劃線 “_” 分隔呢？這個就看你自己的習(xí)慣了，沒有什么硬性要求，一般我是使用中劃線來分隔的，這種方式也比較普遍。在 Sass 中使用中劃線和下劃線這兩種方式是兼容的，也就是說你用中劃線聲明的變量，也可以使用下劃線去引用，比如我定義了變量 $theme-color ，我在引用的時候也可以寫成 $theme_color 。
• 還有一些命名規(guī)范可能是每個公司或者每個項目自己制定的，這個就要根據(jù)實際情況來了。

3.2 變量的引用

上面我們說了怎么去聲明一個 Sass 變量，下面我們講如何去引用它。只要是可以寫 CSS 屬性值的地方，就可以使用變量，所以說，你幾乎可以在任何地方引用變量，編譯后，變量會被替換為變量值，如果說你需要改變這個值，那么你只需要在聲明變量的地方改變這個變量值，那么其余引用它的地方就都會改變。我們寫一段代碼來感受下：

$main-bg-color: blue;
$main-border: 1px solid #cccccc;
$main-font-size: 18px;
$error-text-color: red;
$body-color: $main-bg-color;
body {
  background-color:$body-color;
}
.content {
  font-size:$main-font-size;
  background-color:$main-bg-color;
  border:$main-border;
}
.error {
  font-size:$main-font-size;
  color:$error-text-color;
}

上面我們定義了幾個變量字體顏色、邊框、字體大小等，然后在 .content 和 .error 的樣式表中引用它們，值得注意的是 $body-color 這個變量，在聲明變量時，變量的值也可以引用其他變量，是不是很方便很靈活，上面的 Sass 代碼最終將會編譯為如下的 CSS 代碼：

body {
  background-color: blue;
}

.content {
  font-size: 18px;
  background-color: blue;
  border: 1px solid #cccccc;
}

.error {
  font-size: 18px;
  color: red;
}

3.3 變量的作用域

從 Sass 3.4.x 版本開始，Sass 中開始有作用域的概念。和 javascript 中的變量類似，Sass 的變量也是有作用域這個概念的，也有全局作用域和局部作用域之分，我們舉個例子來看下：

$main-color: red;
h1 {
  $main-color: green; // 局部變量
  color:$main-color;
}
h2 {
  color:$main-color;
}

我們看到在第一行代碼我們聲明了一個全局變量 $main-color ，在 h1 的樣式中我們又聲明了一個和全局變量同名的 $main-color ，在 h1 樣式中聲明的這個 $main-color 就是局部變量，在 h1 的樣式中會引用局部變量而不是全局變量，最終轉(zhuǎn)換為 CSS 的代碼如下：

h1 {
  color: green;
}

h2 {
  color: red;
}

3.3.1 !global 標(biāo)識符

上面我們講解了局部變量和全局變量，那么如果我想用局部變量去改變?nèi)肿兞磕兀?Sass 允許使用 !global 標(biāo)識符來設(shè)置局部變量為全局，以此來改變局部變量的作用范圍，我們還是用上面的代碼，來改變局部變量的作用域為全局：

$main-color: red;
h1 {
  $main-color: green!global;
  color:$main-color;
}
h2 {
  color:$main-color;
}

我們來看下，上面這段轉(zhuǎn)換為 CSS 是這樣的：

h1 {
  color: green;
}

h2 {
  color: green;
}

可以看到我們覆蓋掉了全局變量 $main-color 的值 red ，不過請你記住，在大型項目中盡量不要使用這種方式去改變?nèi)肿兞浚@可能會影響到其他頁面的樣式改變！

3.3.2 !default標(biāo)識符

一般來說我們反復(fù)的聲明一個重名變量，那么最后一個聲明的變量值會覆蓋上面所有的，比如像下面這樣：

$main-color: red;
$main-color: green;
h1 {
  color:$main-color;
}

那么最后編譯的時候會使用最后一次聲明的變量值，也就是 green ，我們看下編譯后的代碼：

h1 {
  color: green;
}

這樣就有一個問題，在實際的項目開發(fā)中，假如需要你來寫一段公共的 Sass 代碼給其他開發(fā)者使用，那么如果你的代碼中聲明了 $main-color 這個變量，那么其他開發(fā)者在自己頁面也聲明了 $main-color 這個變量，并且他是在導(dǎo)入你的這段代碼之前聲明的，那么他的就會被覆蓋掉，這是不行的！

所以這里你需要使用 !default 標(biāo)識符，顧名思義，就是默認(rèn)值，如果這個變量被聲明并賦值了，那么就使用聲明的值，否則就使用默認(rèn)值。我們還是用上面的例子來看下：

$main-color: red; // 假如這個是其他開發(fā)者自己聲明的
$main-color: green!default; // 假如這個是你的代碼片段聲明的
h1 {
  color:$main-color;
}

那么在最后編譯的時候會使用 red 這個變量值，如果其他開發(fā)者沒有聲明這個變量，就會使用 green 這個變量值，我們來看下編譯后的效果：

h1 {
  color: red;
}

上面我們演示了 !default 標(biāo)識符的作用，這個在你使用 Sass 開發(fā)一個獨立的模塊的時候，或者使用 Sass 開發(fā)一個庫來供他人使用的時候，!default 標(biāo)識符石非常有用的！

4. 實戰(zhàn)經(jīng)驗

上面我們已經(jīng)講解了 Sass 變量的語法和使用，那在企業(yè)的實際項目中是怎么應(yīng)用 Sass 變量的呢？這里以一個使用 webpack 搭建的前端項目為例，一般我們都會抽離出 1～n 個文件來專門聲明 Sass 變量(抽離出幾個文件視項目大小而定)，如下圖所示：

如上圖所示，我們一般會在 styles 目錄下新建一個 variables.scss 文件來管理聲明的全局變量，我們接著來看下在這個文件中是怎么寫的：

我們可以看到，在這個文件中不但聲明了很多變量，還對其做了注釋，這樣就很易于后期的管理，尤其是在多人開發(fā)的大型項目中，對整個項目的樣式提取出一些全局變量是很有必要的！

5. 小結(jié)

本節(jié)教程我們主要講了 Sass 變量的使用及語法，主要包括：

• 變量的聲明
• 變量的引用
• 變量的作用域

我們還是通過下圖來回憶一下本節(jié)的內(nèi)容：

在實際的項目中，Sass 變量的使用頻率也是非常高的，不亞于 Sass 嵌套，所以一定要好好掌握這一節(jié)的內(nèi)容，變量的應(yīng)用會讓你更加順手的去管理項目中的樣式！