sass学习（2）——关于变量

定义一个sass变量

可以说，变量是一个编程语言的基础。所以对于sass来说，变量肯定是浓墨重彩的其中一笔，当然函数也是。那我们如何声明定义一个sass的变量呢？

1. 变量的符号$
2. 变量名称
3. 变量的值

那我们看一下如何使用变量

$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感兴趣，可以毫不犹豫加入其中，一定会带你给无限惊喜。