我們都知道，JavaScript可以有變量、數據類型、函數等語法。而作為一門“編程式”的語言，Sass同樣也具備這些語法。在接下來Sass的學習中，大家別忘了多多將Sass的語法與JavaScript的語法對比，這樣更能加深理解和記憶。
這一節，我們先來介紹一下Sass中的變量。
在JavaScript中，聲明變量都是用var。但是在Sass中，我們聲明變量使用的是“$”（美元符號）開頭。
語法：
說明：
我們可以看出，Sass的變量包括3部分：聲明符、變量名、值。Sass變量定義的方式，跟CSS語法很相似，這個我們很容易理解。此外我們需要注意一下，定義一個Sass變量必須用“$”開頭，不然編譯的時候是無法識別的。
在Sass中，對於變量的取值有2種方式：（1）一般值；（2）默認值。
在Sass中，變量的一般值，指的是我們常見的變量值，這個值可以是數字、字符串等。
舉例1：
$width:10px;
div
{
font-size:$width;
}
編譯出來的CSS代碼如下：
div
{
font-size:10px;
}
舉例2：
$color:white;
$bgColor:red;
body
{
color:$color;
background-color:$bgColor;
}
編譯出來的CSS代碼如下：
body
{
color:white;
background-color:red;
}
在Sass中，變量還有一種取值方式，那就是默認值。所謂的默認值，指的是給變量初始化一個默認值，這個值在後面可以根據開發的需要，使用一個“同名變量”的值覆蓋掉。定義變量的默認值很簡單，我們只需要在“變量值”後面加上“!default”就可以了。
舉例：
$width:10px !default;
.div1
{
width:$width;
}
.div2
{
$width:20px;
width:$width;
}
.div3
{
$width:30px;
width:$width;
}
編譯出來的CSS代碼如下：
.div1
{
width:10px;
}
.div2
{
width:20px;
}
.div3
{
width:30px;
}
分析：
想要覆蓋變量的默認值很簡單，我們只需要在該變量被調用之前重新定義該變量的值就可以了。變量的默認值，在實際開發特別是組件化開發中是非常有用的。當然，這裡我們只需要簡單了解一下即可。
跟JavaScript的變量一樣，Sass的變量也有作用域。在Sass中，變量根據作用域可以分為2種：（1）全局變量；（2）局部變量。
其中，Sass中的作用域跟JavaScript中的作用域是非常相似的。
在Sass中，全局變量一般指的是在“選擇器、混合宏、繼承等”外部定義的變量。全局變量從定義開始，一直到整個程序結束都起作用。對於混合宏、繼承這些，我們在後續章節會詳細介紹。
舉例：
$color:red; //定義全局變量
body
{
color:$color; //調用全局變量
}
編譯出來的CSS代碼如下：
body
{
color:red;
}
在Sass中，局部變量一般指的是在“選擇器、混合宏、繼承等”內部定義的變量。局部變量只能在這些的內部起作用，在這些的外部是不起作用的。
舉例：
$color:red; //定義全局變量
body
{
$color:green; //定義局部變量
div
{
color:$color; //調用局部變量
}
}
編譯出來的CSS代碼如下：
body
{
color:green;
}
分析：
在這個例子中，局部變量“$color:green;”會把全局變量“$color:red;”的值覆蓋，因此最終$color的值是green。對於這個，我們聯系一下JavaScript中的局部變量和全局變量就不難理解了。
疑問1、像下面這個例子，我們直接用純CSS寫不就得了，搞毛線還用變量定義一遍那麼麻煩呢？
$width:10px;
div
{
font-size:$width;
}
這個簡單例子，只是讓小伙伴們認識一下Sass變量的用法罷了。在實際開發中，就拿 學習網來說，整個網站大量地方需要用到相同的顏色值、字體大小等。如果我們只用純CSS的方式，一旦這些顏色值等以後需要改動，我們有多少處相同地方就得手動改多少次，甚至還可能出現遺漏。但是如果我們使用變量的方式，每次改動我們只需要改變變量的值就可以了，這樣極大地加快我們的開發效率和提高了網站的可維護性。
此外給小伙伴們一個實用的建議：對於需要重復使用的就定義成一個變量，對於不需要重復使用的直接用數值就行了。