使用变量

`sass`让人们受益的一个重要特性就是它为`css`引入了变量。你可以把反复使用的`css`属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

`sass`使用$符号来标识变量(老版本的`sass`使用`!`来标识变量。改成$是多半因为`!highlight-color`看起来太丑了。)，比如`$highlight-color`和`$sidebar-width`。为什么选择$ 符号呢？因为它好认、更具美感，且在`CSS`中并无他用，不会导致与现存或未来的`css`语法冲突。

#### 1-1 变量声明

`sass`变量的声明和`css`属性的声明很像：

```sass
$highlight-color: #F90;
```
这意味着变量`$highlight-color`现在的值是`#F90`。任何可以用作`css`属性值的赋值都 可以用作`sass`的变量值，甚至是以空格分割的多个属性值，如`$basic-border: 1px solid black;`，或以逗号分割的多个属性值，如`$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;`。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。

与`CSS`属性不同，变量可以在`css`规则块定义之外存在。当变量定义在`css`规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的`{...}`块中（如`@media`或者`&#64;font-face`块），情况也是如此：

```sass
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}
```
在这段代码中，`$nav-color`这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。`$width`这个变量定义在了`nav`的`{ }`规则块内，所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

只声明变量其实没啥用处，我们最终的目的还是使用它们。上例已介绍了如何使用 `$nav-color`和`$width`这两个变量，接下来我们将进一步探讨变量的使用方法。

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

```sass
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

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

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

```sass
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}
```
这里，`$highlight-border`变量的声明中使用了`$highlight-color`这个变量。产生的效 果就跟你直接为border属性设置了一个`1px $highlight-color solid`的值是一样的。 最后，我们来了解一下变量命名的实用技巧，以结束关于变量的介绍。

#### 1-3 变量名用中划线还是下划线分隔;
`sass`的变量名可以与`css`中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如`$highlight-color`），而有些人喜欢使用下划线（如`$highlight_color`）。使用中划线的方式更为普遍，这也是`compass`和本文都用的方式。

不过，`sass`并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用`compass`的样式中用下划线的命名方式进行引用：

```sass
$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}
```
在上例中，`$link-color`和`$link_color`其实指向的是同一个变量。实际上，在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和`Sass`函数的命名。但是在`sass`中纯`css`部分不互通，比如类名、ID或属性名。

尽管变量自身提供了很多有用的地方，但是`sass`基于变量提供的更为强大的工具才是我们关注的焦点。只有当变量与`sass`的其他特性一起使用时，才能发挥其全部的潜能。接下来，我们将探讨其中一个非常重要的特性，即规则嵌套。