Less 语法

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;
}