SASS 中的变量和 LESS 中一样，只是定义格式不同，只演示 sass：
- LESS 中定义变量：
@变量名称: 值; - SASS 中定义变量：
$变量名称: 值;
$w: 200px;
SASS 中变量特点
SASS 中变量特点和 LESS 中几乎一样
- 后定义覆盖先定义
$w: 200px;
$h: 300px;
$w: 600px;
.box1 {
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
- 可以把变量赋值给其它变量
$w: 200px;
$h: $w;
.box1 {
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
- 区分全局变量和局部变量(访问采用就近原则)
$w: 200px;
$h: $w;
.box1 {
$w: 300px;
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
SASS 定义变量注意点
- LESS 中变量是延迟加载，可以先使用后定义
- SASS 中变量不是延迟加载，不可以先使用后定义
$h: 200px;
.box1 {
$w: 300px;
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
$w: 200px;
