Sass 變量的聲明與使用

本節咱們學習 Sass 中的變量，那麼什麼是變量呢？ Sass 中的變量能夠用來存儲一些信息，而且重複使用。變量能夠存儲的信息包括字符串、數字、布爾值、顏色值等等。

聲明變量

Sass 中聲明變量須要用到 $ 符號，格式爲：

$變量名: 變量值;

示例：

例以下面咱們定義一個變量，並給這個變量賦了一個顏色值：

$color:red;
.xkd{
    color: $color;
    a{
        background-color: $color;
    }
}

執行編譯命令，編譯後的 CSS 代碼以下所示：

.xkd {
  color: red;
}
.xkd a {
  background-color: red;
}

定義好變量後，在須要使用到 red 顏色時，就能夠直接使用變量名來代替這個顏色值。固然，如今這樣看咱們仍是不太清楚爲何要使用變量，沒有看出變量的優點。可是若是咱們在一個大型項目中，定義變量會頗有用，例如咱們可能會在多個地方使用同一個顏色值，若是後期須要對這個顏色值進行修改，那麼一個一個去找會很麻煩，而若是定義了變量，就只須要修改變量的值便可。

默認變量

Sass 的默認變量須要在值的後面加上 !default 。默認變量通常用來設置默認值，也就是說當某個變量定義了一個默認值，可是又出現另一個值時，不管誰先被定義，默認值都會被覆蓋。

示例：

看下面這段代碼：

$fsize: 14px;
.xkd{
    $fsize: 12px!default;
    font-size: $fsize;
}

編譯成 CSS 代碼後：

.xkd {
  font-size: 14px;
}

上述代碼中，咱們先定義了一個全局變量 $fsize 並賦值爲 14px ，而後在 .xkd 選擇器中給 $fsize 變量賦了一個 12px 的值，按理來講會優先使用 12px，可是由於在 12px 後面加了一個 !default，變成了一個默認值，最後輸出的 CSS 代碼中，使用的是 14px。

變量的做用域

Sass 中支持兩種類型的變量，即局部變量和全局變量。默認狀況下定義在選擇器以外的爲全局變量，全局變量的做用域爲全局，能夠被全部的選擇器訪問。定義在選擇器內的爲局部變量，局部變量的做用域只能在當前層級上有效果。下面咱們經過一個例子來看一下局部變量和全局變量的使用。

示例：

$color: #ccc;  // 全局變量
.one{
    $color: #eee;  // 局部變量
    background-color: $color;
}
.two{
    background-color: $color;
}

編譯成 CSS 代碼：

.one {
  background-color: #eee;
}
.two {
  background-color: #ccc;
}

上述代碼中，能夠看到咱們定義了一個全局變量 $color，而後又在 .one 中定義了一個局部變量 $color。此時.one 和 .two 同時引用 $color ，編譯成 CSS 代碼後，.one 中使用的是局部變量的值，而 .two 中使用的是全局變量的值。

能夠看出，局部變量的做用域就只在聲明這個變量的當前代碼塊中，而全局變量的做用域則在全局。當使用了某個變量時，首先會在當前代碼塊中查找，若是找不到則向上一層代碼塊中查找，一直到找到爲止。

!global 關鍵字

咱們能夠經過關鍵字 !global 來設置全局變量，也就是說咱們只要在一個變量後面使用這個關鍵字，那麼這個變量就爲全局變量。

示例：

咱們來看一個例子：

.one{
    $num: 14px !global;  
    font-size: $num;
}
.two{
    font-size: $num;
}

編譯成 CSS 代碼：

.one {
  font-size: 14px;
}

.two {
  font-size: 14px;
}

在上述代碼中，本來在.two 選擇器中是不能訪問 .one 選擇器中的變量的，可是由於變量 $num 使用了 !global 關鍵字，因此 $num 變成了一個全局變量，這樣就能夠 .two 選擇器訪問啦。