本文作者：開課吧無憂

圖文編輯：開三金

通過前面幾期，Sass的使用說明書已經(jīng)發(fā)放給各位了，還沒來得及看的同學(xué)可以查收一下。

需要復(fù)習(xí)的小伙伴，點擊傳送門就可以啦?

今天來給大家掰扯掰扯Sass的功能說明書，各位看官準備好瓜子水果板凳，開始上課了；

關(guān)于變量的使用說明

變量來源于數(shù)學(xué)，是計算機語言中能儲存計算結(jié)果或能表示值抽象概念。

由于變量讓你能夠把程序中準備使用的每一段數(shù)據(jù)都賦給一個簡短、易于記憶的名字。

因此它們十分有用。

好吧好吧，其實簡單來說，就是給人起外號。

我覺得250px這個值不好看，我給它起個外號叫SB，于是我以后就可以這么寫了：

現(xiàn)在，box的寬度雖然我寫的是SB，但是它實際代表的是250px。

至于前面那個美元”$”符號，它其實是一個標識。

告訴Sass, 這是一個外號，并不是一個真SB。

有了這個外號之后就很方便啦，以后如果想要修改box的寬度，直接喊一聲：

SB變身！

然后它就變成100px，接著box的寬度就變成100px了。

變量的操作案例

現(xiàn)在我在頁面上寫了一個矩形，一個三角形，一個按鈕。

這些都是平常我們頁面中很常見的元素，它們都用了一個我也說不清的顏色。

總之不是太好看，暫且先不管，來看看代碼：

在代碼的開頭我定義了一個變量：

$color: #899; 

然后分別用在了代碼中的標記處。

那這時候我們就可以說，上面圖中的三個元素，它們的顏色都是由變量 $color來控制的。

現(xiàn)在這個顏色不好看，說不定哪天UI小姐姐就會讓我改……

但是沒關(guān)系，我們有變量。

當(dāng)需要修改顏色的時候，直接去修改變量的值就可以了。

比如現(xiàn)在我們要把他們變成粉色的：

這時候我只需要把變量修改掉就好了：

$color: #f991ff;

得到結(jié)果：

另外，既然說到變量，那么變量它是有作用范圍的。

它只能在一定范圍里起作用。

比如我在a.scss中定義了 變量$color 那么在b.scss中就不能使用了，只能在a.scss中使用。

被“紅杏出墻”的作用域

現(xiàn)在我們知道了在a.scss中聲明的變量只能在a.scss中使用了。

其實這也是有前提的，這個前提就是這個變量的聲明沒有被任何東西所包裹。

比如說：

在這段代碼里，變量 $zhuangBiFan 就可以說被選擇器 .box 包裹起來了。

那么這時候這個變量在 .box的外面就不能使用了。

這時候我們可以說變量 $zhuangBiFan 的作用范圍就是在選擇器.box里面。 

作用范圍，還有一個比較專業(yè)的名稱，叫做作用域。

其實域就是范圍的意思，只不過叫作用域會顯得稍微高大上一點點，所以就叫他作用域吧~ 

不過呢，Sass還提供了一種變量越獄的方法，那就是在變量的后面加上一個global :

在這個情況下，#main里面的變量在#sidebar里面也可以使用（咋有種紅杏出墻的趕腳）

另外有趣的一點是：變量的值可以引用其他變量！?。?/p>

給人起外號這么好玩的事情，你確定不get一下么？

趕緊用起來吧~