今天完成的事情：

学习了sass

变量：

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，

那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中

（如@media或者@font-face块），情况也是如此：

$nav-color: #F90;

nav {

  $width: 100px;

  width: $width;

  color: $nav-color;

}

//编译后

nav {

  width: 100px;

  color: #F90;

}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。

$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。

这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

变量引用：

$highlight-color: #F90;

.selected {

  border: 1px solid $highlight-color;

}

//编译后

.selected {

  border: 1px solid #F90;

}

看上边的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，

$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、

实心且颜色值为#F90的边框。

变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这很有用。

下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

$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的值是一样的