sass

使用变量

sass使用$符号来标识变量(老版本的sass使用!来标识变量。

变量声明

$highlight-color: #F90;

当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

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

//编译后

nav {
  width: 100px;
  color: #F90;
}

变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。

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

//编译后

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

变量值也可以引用其他变量。

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

变量名用中划线还是下划线分隔;

sass的变量名可以与css中的属性名和选择器名称相同