Sass中的变量

原创

程序员NEO

发布于 2023-09-28 23:30:53

3610

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

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;