less是一种css的扩展语言,一般需要less.js工具将less样式转换成css样式
变量可以替换多次重复出现的属性或者属性值,这样在修改需求时只需要在这一处修改变量值,可以提高工作效率
1、替换多次重复出现的属性的值
当文件中多次重复出现n次多同一个属性值时,可以用变量替换这个变量值,当以后需要改变属性值时直接改变变量的值 ·
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
编译为:
#header {
color: #6c94be;
}
2、作为选择器
@my-selector: banner;
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
编译为:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
3、URL网址
当项目特别复杂时,文件路径也会特别复杂,假如用变量替换路径,就可以特别方便快捷的定义文件路i经
@images: "../img";
body {
color: #444;
background: url("@{images}/white-sand.png");
}
4、引入语句
引入语句和引入文件类似
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";
5、属性
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
编译成:
.widget {
color: #0ee;
background-color: #999;
}
6、二次变量
@primary: green;
@secondary: blue;
.section {
@color: primary;
.element {
color: @@color;
}
}
编译为:
.section .element {
color: green;
}
7、作为变量的属性
当属性定义多个属性值时,Less将选择当前/父级范围内的最后一个属性作为“最终”值
.block {
color: red;
.inner {
background-color: $color;
}
color: blue;
}
编译为:
.block {
color: red;
color: blue;
}
.block .inner {
background-color: blue;
}
8、变量多次定义选取规则
当同级类中定义变量两次时,将使用变量的最后一个定义
@var: 0;
.class { //.class同级中定义了一次@var
@var: 1;
.brass { //.brass同级中定义了两次@var,最后取最后一个定义的变量值
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
编译为:
.class {
one: 1;
}
.class .brass {
three: 3;
}
————————————————
版权声明:本文为CSDN博主「qq_41625881」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41625881/article/details/79595268