对对对

我们在使用css的时候经常会遇到不断的写一个相同的属性值的情况，比如说1px solid #333，这时候就可以定义一个变量，将这个值赋值给这个变量，在后面用到的时候，直接写变量名即可。

变量声明

$normal-border:1px solid #ccc;

$是声明变量的符号，normal-border是变量名，1px solid #ccc是变量的值。

变量可以在块内定义，也可以在块外定义，

1. 定义在块内的变量只能在块内使用；
2. 定义在块外的变量既可以在块内使用，也可以在块外使用

$font-color: #999;// 块外定义
.main{
    $width: 20px; // 块内定义
}

变量的引用

先来看以下上一节中的块内外定义变量的引用

$box-width: 100px; // 块外定义
.main{
    $font-color: #000;
    width: $box-width; // 引用成功
    color: $font-color; // 引用成功
}

.nav{
    width: $box-width; // 引用成功
    color: $font-color; // 引用失败
}

引用的变量在编译过后都会被替代为相应的变量值

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

//编译后

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

这里的$highlight-color在编译过后就会被替代为#F90。