轻松捅破Sass的窗户纸——变量篇

关于变量的使用说明

我觉得250px这个值不好看，我给它起个外号叫SB，于是我以后就可以这么写了
现在，box的宽度虽然我写的是SB，但是它实际代表的是250px。
至于前面那个美元”$”符号，它其实是一个标识。
告诉Sass, 这是一个外号，并不是一个真SB。
有了这个外号之后就很方便啦，以后如果想要修改box的宽度，直接喊一声：
SB变身！
然后它就变成100px，接着box的宽度就变成100px了

变量的操作案例

现在我在页面上写了一个矩形，一个三角形，一个按钮。
这些都是平常我们页面中很常见的元素，它们都用了一个我也说不清的颜色。
总之不是太好看，暂且先不管，来看看代码：

在代码的开头我定义了一个变量：

$color: #899;

然后分别用在了代码中的标记处。

那这时候我们就可以说，上面图中的三个元素，它们的颜色都是由变量 $color来控制的。

现在这个颜色不好看，说不定哪天UI小姐姐就会让我改……
但是没关系，我们有变量。

当需要修改颜色的时候，直接去修改变量的值就可以了。

比如现在我们要把他们变成粉色的：

这时候我只需要把变量修改掉就好了：

$color: #f991ff;

得到结果：

另外，既然说到变量，那么变量它是有作用范围的。
它只能在一定范围里起作用。
比如我在a.scss中定义了 变量$color 那么在b.scss中就不能使用了，只能在a.scss中使用。

被“红杏出墙”的作用域

现在我们知道了在a.scss中声明的变量只能在a.scss中使用了。

其实这也是有前提的，这个前提就是这个变量的声明没有被任何东西所包裹。

比如说：

在这段代码里，变量 $zhuangBiFan 就可以说被选择器 .box 包裹起来了。

那么这时候这个变量在 .box的外面就不能使用了。

这时候我们可以说变量 $zhuangBiFan 的作用范围就是在选择器.box里面。

作用范围，还有一个比较专业的名称，叫做作用域。
不过呢，Sass还提供了一种变量越狱的方法，那就是在变量的后面加上一个global :

在这个情况下，#main里面的变量在#sidebar里面也可以使用（咋有种红杏出墙的赶脚）

另外有趣的一点是：变量的值可以引用其他变量！！！