学会如何使用LESS（三）----条件表达式、循环、合并属性和引入

川长思鸟来 2022-06-14 04:06 195阅读 0赞

## 条件表达式 ##

条件表达式其实就是我们在less中使用比较运算符或者表达式的判断来输入我们的值，根据不同的条件来输出不同的值。

**一、带条件的混合**

比较运算符有以下几种：

>,>=,=,=<,<,true

.mixin( @a )when( lightness(@a)>=50% ){ 
        background-color: black;
    }
    .mixin( @a )when( lightness(@a)<50% ){ 
        background-color: white;
    }
    
    .class1{
        .mixin( #aaa );
    }
    .class2{
        .mixin( #333 );
    }

编译后的css:

.class { background-color: black; }

**二、类型检查函数**  
类型检查函数也就是所得的值通过函数去判断是那个类型的值。  
*如下是一些函数*  
Iscolor(是否为颜色值) Isnumber(是否为数字) isstring(是否为字符) iskeyword(是否为关键字) isurl(是否为url)

.minix( @a )when(iscolor(@a)){ 
        background: black;
        color:@a;
    }
    .minix( @a )when(isnumber(@a)){ 
        background: white;
        number: @a;
    }
    .minix( @a )when(isstring(@a)){ 
        background: orange;
        string: @a;
    }
    .minix( @a )when(iskeyword(@a)){ 
        background: yellow;
        keyword: @a;
    }
    .minix( @a )when(isurl(@a)){ 
        background: blue;
        url:@a }

编译后的css:

.class1 { background: black; color: #333333; }
    .class2 { background: white; number: 123; }
    .class3 { background: orange; string: "hello less!"; }
    .class4 { background: orange; string: "www.baidu.com"; }

**三、单位检查函数**  
检查一个值除了数字是否是一个特定的单位。

.minix( @a )when(ispixel(@a)){ 
        background: yellow;
        pixel: @a;
    }
    .minix( @a )when(ispercentage(@a)){ 
        background: blue;
        percentage:@a } .class1{ .minix(230px);
    }
    .class2{
        .minix(83%);
    }

编译后的css:

.class1 { background: yellow; pixel: 230px; }
    .class2 { background: blue; percentage: 83%; }

## 循环 ##

在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出个循环结构。

.loop( @count )when( @count > 0 ){
        h@{count}{
            padding: ( 10px * @count );
        }
        .loop((@count - 1));
    }
    
    div{
        .loop(5);
    }

编译后的css:

div h5 { padding: 50px; }
    div h4 { padding: 40px; }
    div h3 { padding: 30px; }
    div h2 { padding: 20px; }
    div h1 { padding: 10px; }

## 合并属性 ##

在需要合并的属性的：前加上+就可以完成合并，合并以，分割属性；  
**一、在需要合并的属性的;（分号）的前面加上+就可以完成合并，合并以,分割属性**

.minix(){
        box-shadow+: inset 0 0 10px #555; 
    }
    .myclass{
        .minix;
        box-shadow+: inset 0 0 20px #222;
    }

编译后的css:

.myclass { box-shadow: inset 0 0 10px #555, inset 0 0 20px #222; }

**二、“+\_”空格分割所合并的属性值**

.a(){
        background+_: #333; 
    }
    .aclass{
        .a;
        background+_: url("sss.jod");
    }

编译后的css:

.aclass { background: #333 url("sss.jod"); }

**三、如果两种方式混用，则根据最新的判断以什么方式进行分割属性值**

.b(){
        background+_: #333; 
    }
    .bclass{
        .a;
        background+: url("sss.jod");
    }
    
    .c(){
        background+: #333; 
    }
    .cclass{
        .a;
        background+_: url("sss.jod");
    }

编译后的css:

.bclass { background: #333, url("sss.jod"); }
    .cclass { background: #333 url("sss.jod"); }

## 引入 ##

你可以引入一个或多个less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！  
**注意**：引入css文件会被原样输出到编译的文件中  
***一些常用的引入***

@import (reference) "main.less";  //引用LESS文件，但是不输出
    @import (inline) "main.less";  //引用LESS文件，但是不进行操作
    @import (once) "main.less";  //引用LESS文件，但是不进行操作
    @import (less) "index.css";  //无论是什么格式的文件，都把他作为LESS文件操作
    @import (css) "main.less";  //无论是什么格式的文件，都把他作为CSS文件操作