sass学习（2）——关于变量
定义一个sass变量
可以说，变量是一个编程语言的基础。所以对于sass来说，变量肯定是浓墨重彩的其中一笔，当然函数也是。那我们如何声明定义一个sass的变量呢？
- 变量的符号
$ - 变量名称
- 变量的值
那我们看一下如何使用变量
$color: white;
body{
color: $color;
}
div{
color: $color;
}
就是这么简单，当然这个例子很简单，所以暂时看不出它所带来的非凡的效果。
全局变量与局部变量
global
sass中的变量也是分为全局与局部的，在代码块内声明的变量只会在代码块内生效，除非为其添加了!global。前面关于全局和局部变量，学过一点js的都应该懂，这里就不再赘述。我们直接看看如何在局部变量里声明一个全局的变量。
$color: white;
body{
$partial-color: black !global; //若没有!global则会报错，无法编译
$color: red;
}
div{
color: partial-color;
color: $color; //编译后仍然是white，说明并未收到上一个代码块的影响
}
default
当然还有一个类似的命令是!default，直接根据语意即可知，它是说明变量值为默认值。任何的值都可以覆盖默认值，即使默认值出现在后面。
$color: red;
$color: blue !default;
body{
color: $color //编译后为red
}
这个default对于组件化的开发是有很大的帮助的，大家也可以思考思考。非default值出现在后面，则是普通的覆盖。若是出现在前面，则是sass自动编译，使用非default值来覆盖default。这个操作会让组件化开发的时候，更易于控制。
特殊变量
一般变量的值是属性值，我们可以拿来直接用。但是如果变量的值是属性名的话，我们就需要使用一个特殊的表达式#{$variab}，可以直接看个例子。
$white-color: white;
$black-color: black;
body{
.div-#{$white-color}: $white-color;
.div-#{$black-color}: $black-color;
}
------编译后------
body {
.div-white: white;
.div-black: black;
}
这个功能可是十分有用啊，这样我们就可以很舒服的通过变量来控制属性名了。
&操作符
个人感觉&操作符在javascript里，和this指针差不多。这个怎么说呢，就是&变量会自动转化成父层的元素，这样在某些地方可以大有好处，尤其是伪元素。直接来看看例子吧。
$base-color: black;
$hover-color: red;
.btn{
color: $base-color;
&:hover{
color: $hover-color;
}
}
------编译后------
.btn {
color: black;
}
.btn:hover {
color: red;
}
巧妙利用&操作符，会让我们使用起来更加灵活，自如。
多值变量
这种变量可也真是让人涨姿势，分为list变量和map变量。对应javascript来说，也就是数组和对象。下面一一来简单介绍一下。
list
list中的值，可以用三种形式来区分，空格、逗号还有小括号。其中若灵活混用，则可以做成类似二维数组的变量，如[['white', 'black'] ['red', 'blue']]。那使用什么办法取值呢，sass提供了一个nth($variable, index)的方法。一起来看看吧。
$color: white black red blue;
a{
color: nth($color, 2);
&:hover{
color: nth($color, 4);
}
}
------编译后------
a {
color: black;
}
a:hover {
color: blue;
}
是不是非常的酷！这样可以让我们的变量更加灵活。当然list数据的操作也有非常的自带的函数，想要更多了解的也可以自行查阅。
map
其实map也是大同小异，只是map是根据key和value做更多更自由的事情。这里我就引用一下别人的例子，我觉得这个例子是十分有特色的，也可以省下非常多的时间。
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
------编译后------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
这里也看到了一个内置函数，@each, $header和$size，则分别代表着循环过程中的key和value。相信大家也是能看得出来的。我们通过一个map，可以如此简洁的定义好三个相似的样式，多让人舒心。
关于sass常用的变量，也差不多讲完了。语法的学习，必须配合实际操作。如果大家对sass感兴趣，可以毫不犹豫加入其中，一定会带你给无限惊喜。
