less中的变量
原创
什么是变量
和 JS 中的概念基本一样
less 中定义变量的格式
@变量名称: 值;
@w: 200px;less 中使用变量的格式
@变量名称;
@w;@w: 200px;
@h: 400px;
@c: red;
.box1 {
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
}
.box2 {
width: @w;
height: @h;
background: @c;
}
image-20210807141308431
和 JS 一样可以将一个变量赋值给另外一个变量，使用格式如下
@变量名称 : @变量名称;
@w: 200px;
@h: @w;和 JS 一样 less 中的变量也有 全局变量 和 局部变量 之分
定义在
{}外面的就是全局的变量，什么地方都可以使用
image-20210807141731351
定义在
{}里面的就是局部变量，只能在{}中使用
@w: 200px;
@h: 400px;
@c: red;
.box1 {
@bgColor: blue;
width: @w;
height: @h;
background: @bgColor;
margin-bottom: 20px;
}
.box2 {
width: @w;
height: @h;
background: @c;
}
image-20210807141918904
如果定义在
{}中的变量在其它的{}中使用会报错，如下，首先在编译层面就过不去
image-20210807142125050
@w: 200px;
@h: 400px;
@c: red;
.box1 {
@bgColor: blue;
width: @w;
height: @h;
background: @bgColor;
margin-bottom: 20px;
}
.box2 {
width: @w;
height: @h;
background: @bgColor;
}
image-20210807142101624
注意点：less 中的变量是
延迟加载的，写到后面也能在前面使用
image-20210807142234934
@w: 200px;
@h: 400px;
.box1 {
@bgColor: blue;
width: @w;
height: @h;
background: @bgColor;
margin-bottom: 20px;
}
.box2 {
width: @w;
height: @h;
background: @c;
}
@c: red;
image-20210807151042953
和 JS 一样不同作用域的变量不会相互影响，只有相同作用域的变量才会相互影响
image-20210807151619652
@w: 200px;
@h: 400px;
@c: red;
.box1 {
@c: yellow;
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
@c: pink;
}
.box2 {
width: @w;
height: @h;
background: @c;
}和 JS 一样在访问变量时会采用就近原则
image-20210807151328223
@w: 200px;
@h: 400px;
@c: red;
.box1 {
@c: yellow;
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
}
.box2 {
width: @w;
height: @h;
background: @c;
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
