Sass变量的使用

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。


1、普通变量：定义之后可以在全局范围内使用。

scss语法：

$fontSize: 12px;body{    font-size:$fontSize;}

css输出：

body{    font-size:12px;}

2、默认变量：Sass的默认变量仅需要在值后面加上!default即可。

scss编译

$baseLineHeight:        2;$baseLineHeight:        1.5 !default;body{    line-height: $baseLineHeight; }

css输出：

body{    line-height:2;}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

3、特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

scss编译

$borderDirection:       top !default; $baseFontSize:          12px !default;$baseLineHeight:        1.5 !default;//应用于class和属性.border-#{$borderDirection}{  border-#{$borderDirection}:1px solid #ccc;}//应用于复杂的属性值body{    font:#{$baseFontSize}/#{$baseLineHeight};}

CSS输出：

.border-top{  border-top:1px solid #ccc;}body {  font: 12px/1.5;}

4、多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list

1. list数据可通过空格，逗号或小括号分隔多个值，可用nth(var,index)取值。list数据操作还有很多其他函数如：
2. length($list)
3. join(list1,list2,[$separator])
4. append(list,value,[$separator]) 具体可参考sass Functions（搜索List Functions即可）

scss输出

$linkColor:#08c #333 !default;//第一个值为默认值，第二个鼠标滑过值a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}

css输出

a {  color: #08c;}a:hover {  color: #333;}

map

1. map数据以key和value成对出现，其中value又可以是list
2. 格式为：$map: (key1: value1, key2: value2, key3: value3)
3. 通过map-get(map,key)取值
4. 关于map数据还有很多其他函数如map-merge(map1,map2)，map-keys(map)，map−values(map)等
5. 具体可参考sass Functions（搜索Map Functions即可）

定义：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

scss编译

$key-green:green;$val-green:#fff;$key-red:red;$val-red: #ff0000;$key-info:info;$val-info: #ff00ff;$key-success:success;$val-success: #f66;//$text: (green: #fff, red: #ff0, info: #f0f);$text: (    $key-green: $val-green,    $key-red: $val-red,    $key-info: $val-info,    $key-success:$val-success);@each $i, $size in $text {    .text-#{$i} {        color: $size;    }}

css输出

.text-green {  color: #fff;}.text-red {  color: #ff0000;}.text-info {  color: #ff00ff;}.text-success {  color: #f66;}

5、全局变量：在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

scss编译

$fontSize:12px;body{    $fontSize: 14px;    font-size:$fontSize;}p{    font-size:$fontSize;}

css输出

body {  font-size: 14px;}p {  font-size: 12px;}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。