sass变量

滴，sass的第一次打卡。

SASS - Syntactically Awesome StyleSheets，直译过来就是语法上令人惊叹的样式表。的确，SASS是对CSS的扩展，拥有 变量、mixin、导入、嵌套、自定义函数 等出色的功能。为了更快速高效、模块化的组织我的CSS代码，所以我要开始学习sass。

今天，就要谈谈 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 这个问题上。

！default 变量默认值

是这样的，正是因为sass变量的奇怪之处，所以 !default 也就应运而生了。
我们先来看看有没有这玩意儿解析出来的css有什么区别：

无 !default

$color: red;$color: blue;p {    color: $color;  // blue}

有 !default

$color: red;$color: blue; !defaultp {    color: $color;  // red}

结果已经很明显了，!default 的出现打破了“后来居上”的规则。它的具体规则是这样的：假如定义了一个变量且在之前没有定义过同名变量，为这个变量添加 !default 后，则使用这个值；如果之前已经声明过同名变量，则使用之前的值。

Bootstrap作为一个通用的CSS框架，用户在使用的时候难免会重写某些样式。

首先，我们编写一个 _variables.scss 的文件：

然后，在 style.scss 中导入，并重写样式：

结果，编译出来的 style.css 如下：

产生了重复的代码。

现在，就该是 !default 显身手的时候了。

在 style.scss 中这样修改：

结果，在编译出来的 style.css 文件中就没有重复的代码：

这就是 !default 的魅力。