我们都知道，JavaScript可以有变量、数据类型、函数等语法。而作为一门[编程式]的语言，Sass同样也具备这些语法。在接下来Sass的学习中，大家别忘了多多将Sass的语法与JavaScript的语法对比，这样更能加深理解和记忆。
这一节，我们先来介绍一下Sass中的变量。
一、Sass变量简介
在JavaScript中，声明变量都是用var。但是在Sass中，我们声明变量使用的是[$]（美元符号）开头。
语法：
说明：
我们可以看出，Sass的变量包括3部分：声明符、变量名、值。Sass变量定义的方式，跟CSS语法很相似，这个我们很容易理解。此外我们需要注意一下，定义一个Sass变量必须用[$]开头，不然编译的时候是无法识别的。
在Sass中，对于变量的取值有2种方式：（1）一般值；（2）默认值。
1、一般值
在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;
}
2、默认值
在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中的作用域是非常相似的。
1、全局变量
在Sass中，全局变量一般指的是在[选择器、混合宏、继承等]外部定义的变量。全局变量从定义开始，一直到整个程序结束都起作用。对于混合宏、继承这些，我们在后续章节会详细介绍。
举例：
$color:red; //定义全局变量
body
{
color:$color; //调用全局变量
}
编译出来的CSS代码如下：
body
{
color:red;
}
2、局部变量
在Sass中，局部变量一般指的是在[选择器、混合宏、继承等]内部定义的变量。局部变量只能在这些的内部起作用，在这些的外部是不起作用的。
举例：
$color:red; //定义全局变量
body
{
$color:green; //定义局部变量
div
{
color:$color; //调用局部变量
}
}
编译出来的CSS代码如下：
body
{
color:green;
}
分析：
在这个例子中，局部变量[$color:green;]会把全局变量[$color:red;]的值覆盖，因此最终$color的值是green。对于这个，我们联系一下JavaScript中的局部变量和全局变量就不难理解了。