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;
}
image-20210814134832991
- 可以把变量赋值给其它变量
$w: 200px;
$h: $w;
.box1 {
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
image-20210814134918927
- 区分全局变量和局部变量(访问采用就近原则)
$w: 200px;
$h: $w;
.box1 {
$w: 300px;
width: $w;
height: $h;
background: red;
margin-bottom: 20px;
}
.box2 {
width: $w;
height: $h;
background: blue;
}
image-20210814135019641
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;
image-20210814135406207
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
