变量的引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

$color: #F90;
.box2 {
  border: 1px solid $color;
}

//编译后

.box2 {
  border: 1px solid #F90;
}

看上边示例中的$color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$color会被#F90这一颜色值所替代。产生的效果就是给box2这个类一条1像素宽、实心且颜色值为#F90的边框。

在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

$color: #F90;
$border: 1px solid $color;
.box2 {
  border: $border;
}

//编译后

.box2 {
  border: 1px solid #F90;
}

这里，$border变量的声明中使用了$color这个变量。产生的效 果就跟你直接为border属性设置了一个1px $color solid的值是一样的。