Sass中的变量

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;