这个视频我们一起来看一下 Sass 为 CSS 提供的一个重要的功能，变量。我们可以去定义一些变量，然后给它们一些特定的值。在创建样式的时候，可以把变量作为样式的属性的值 ...

这样如果你想更改这些样式的属性值的时候，只需要去修改这个变量的值就行了。不需要再使用编辑器的查找并且替换功能了。 在 Sass 里面，声明一下变量，或者叫定义一个变量，变量的名称需要使用 $ 符号开始 ... 比如我们定义一下叫 primary-color 的变量，先输入一个 $ 符号 ... 然后是 primary-color ...

后面加上一个冒号 ... 然后是给这个变量的值 ... 这里我们把一个颜色作为它的值 ...

$primary-color: #1269b5;

现在我们就定义好了一个变量，就是这个 $primary-color ... 它的值是一个颜色 ... 这样我们就可以在这个 Sass 文件里的任何地方，去使用这个变量，来引用这个变量里面的值了 ...

在下面，先添加一块样式 ... 里面用一个 backgroud-color 这个属性 ... 它的值，我们可以去引用在上面定义的这个变量 .. $primary-color ...

div.box {
background-color: $primary-color;
}

保存 .. 在右边，你会看到编译好的 CSS ... 这个样式里面，使用了变量的地方，会被替换成这个变量里的值 ..

我们可以再去定义一块样式 .. 用一个 border 属性（bd+）... 在这块样式里面，边框的颜色这里，我们可以使用在上面定义的这个变量 ...

h1.page-header {
border: 1px solid $primary-color
}

保存 ... 同样，使用变量的地方，编译之后会替换成交给变量的值 ...

变量的值可以是数字，颜色，可以是字符串，如果是字符串的值，需要在变量的值的周围加上一组引号 ... 另外变量的值也可以是多个值 ...

在上面，我们再去定义一个变量 ... 叫做 $primary-border... 它的值是多个值 ... 1px 空格 solid 空格 ... 在变量的值里面，我们也可以去引用其它的变量 ... 比如在上面定义的这个 $primary-color ...

在这个 h1.page-header 里面，我们再去使用这个新定义的变量 .. 去掉 border 属性后面的值 ... 在这里直接去引用 $primary-border 这个变量 ...

保存 .... 你会看到，输出的 CSS ，使用 $primary-border 这个变量的地方，会替换成在这个变量里定义的值 ... 1px solid ... 在这个变量里，我们也用到了其它的变量 ... 这个变量也会被替换成它的值 ...

另外还有一件事，就是在定义变量的时候，这个变量的名字里面，可以使用减号，也就是连接符号，也可以使用下划线，它们之间是可以交替使用的，比如你在定义变量的时候使用的是连接符号，在引用它的时候，可以使用连接符号，也可以使用下划线 .. 不过为了更清楚一些，你需要统一一下。