Less提升
- 条件表达式
- 循环
- 合并属性
一共有5种 >,>=,<,<=,true
类型检查函数 , iscolor ,isnumber,isstring,iskeyword,isurl
(一)使用条件表达式
- 使用条件表达式后面接when
@value:100;
.text4(@value)when(@value>100)
{
color:@hongse;
}
.text4(@value)when(@value=100)
{
color:@lvse;
}
.text4(@value){
@{beijing}:@hongse
}
.result{
.text4(@value);
}
编译后的结果
.result {
color: green;
background: red;
}
因为@value的值就是100
- iscolor ,isnumber,isstring,iskeyword,isurl 条件表达式
@value:100;
.text5(@value)when(isnumber(@value))
{
color:@hongse
}
.result1{
.text5(@value);
}
//编译后
.result1 {
color: red;
}
(二)Less中的循环
Less中的循环和递归差不多。都是自身掉自身
这里千万注意自己调用自己，里面必须是双括号，因为是参数了
第二点 特别注意的就是计算符号前后必须要留有空格，否则直接报错。
@i:5;
.loop(@i)when(@i>0)
{
.loop((@i - 1));
width:(10px * @i);
}
.jieguo{
.loop(@i);
}
//编译后的结果
.jieguo {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
第二种写法:
@i:5;
.loop(@i)when(@i>0)
{
.loop((@i - 1));
.h@{i}{
color:red;
}
width:(10px * @i);
}
.jieguo{
.loop(@i);
}
//编译后的结果就是:
.jieguo .h1 {
color: red;
}
.jieguo .h2 {
color: red;
}
.jieguo .h3 {
color: red;
}
.jieguo .h4 {
color: red;
}
.jieguo .h5 {
color: red;
}
(三)合并属性
最常用的就是+_加号加上下划线组成
.all6(){
@{beijing}+_:url("@{url}");
}
.result0{
.all6();
@{beijing}+_: no-repeat left center;
}
//最后的结果就是
.result0 {
background: url("../images/01.jpg") no-repeat left center;
}
