滴，sass的第一次打卡。
SASS - Syntactically Awesome StyleSheets，直译过来就是语法上令人惊叹的样式表。的确，SASS是对CSS的扩展，拥有 变量、mixin、导入、嵌套、自定义函数 等出色的功能。为了更快速高效、模块化的组织我的CSS代码，所以我要开始学习sass。
今天，就要谈谈 sass 变量。
sass中的变量定义特别容易，使用 $ + variableName，比如：
// 定义一个sass变量，并使用 $gray-base: #000; body { color: $gray-base; }另外，sass变量可以使用 #{} 嵌套在字符串中：
$side: top; .container { margin-#{$side}: 20px; }好了，这是我学到的基本用法。 于是，我试着打开了Bootstrap 4.0源码下的scss文件，找到 _variables.scss文件。那好，问题来啦，见下图：
这个 !default 应该是格外显眼了，“顺藤摸瓜”学到了一些关于sass变量的进阶用法。
看官，您接着往下看 :)
首先，我们知道在JavaScript中变量有全局变量和局部变量之分，区分这两种变量是根据其所在的作用域。而sass变量也可分为全局变量和局部变量，不过它们的规则却有点不同。我们先来看一段代码：
$color: red; p { $color: blue; color: $color; // blue } div { color: $color; // blue }很奇怪吧！这段代码中我们首先定义了一个 $color 变量为 red，然后在 p 元素选择器中又定义了一个 $color 变量为 blue。我们很容易能接受 p 元素的字体颜色显示为蓝色，奇怪的是在 div 元素中，字体颜色也显示为蓝色。
而如果仅在 p 元素中定义一个 $color 变量，这时 div 元素就再也无法使用 p 中定义的变量。
来，看下图：
你会发现，这和JavaScript中“局部变量不使用 var 声明 ”有类似的地方。
var a = 1; (function fn() { a = 2; }()); console.log(a); // 2好，下面我们再来说一种情况 - 嵌套中的sass变量。这种情况和JavaScript中的作用域链也类似。
div { $color: red; color: $color; // red p { color: $color; // red } }p 元素作为 div 的子元素，这样 p 也能访问在 div 中定义的变量。
呼~好了，高潮来了，前方高能，看官继续 :)
扯了这么多，现在终于说到 !default 这个问题上。
是这样的，正是因为sass变量的奇怪之处，所以 !default 也就应运而生了。 我们先来看看有没有这玩意儿解析出来的css有什么区别：
无 !default
$color: red; $color: blue; p { color: $color; // blue }有 !default
$color: red; $color: blue; !default p { color: $color; // red }结果已经很明显了，!default 的出现打破了“后来居上”的规则。它的具体规则是这样的：假如定义了一个变量且在之前没有定义过同名变量，为这个变量添加 !default 后，则使用这个值；如果之前已经声明过同名变量，则使用之前的值。
Bootstrap作为一个通用的CSS框架，用户在使用的时候难免会重写某些样式。
首先，我们编写一个 _variables.scss 的文件：
然后，在 style.scss 中导入，并重写样式：
结果，编译出来的 style.css 如下：
产生了重复的代码。
现在，就该是 !default 显身手的时候了。
在 style.scss 中这样修改：
结果，在编译出来的 style.css 文件中就没有重复的代码：
这就是 !default 的魅力。
