使用变量
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中的属性名和选择器名称相同