less的使用

1、嵌套

.a{
    width: 100px;
    .b{
        width: 200px;
    }
}

2、函数

.text-overflow() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: normal;
}
// 调用
.a{
    .text-overflow;
}

3、引入

// 正常
@import "../../common/mixin.less";
@import (once) "../../common/mixin.less";
// 使用但不输出
@import (reference) "../../common/mixin.less";
// 在输出中包含源文件但不处理它
@import (inline) "../../common/mixin.less";
// 按照less的方式输出
@import (less) "../../common/mixin.css";
// 按照css的方式输出
@import (css) "../../common/mixin.less";
// 关键字输出，keyword可为任意关键字，逗号可以分隔多个关键字
@import（keyword）“../../common/mixin.less”;

4、条件判断

（一）、运算符

<、>、<=、>=、=

（二）、检查函数

Iscolor：是否为颜色值。
Isnumber：是否为数值。
Isstring：是否为字符串。
Iskeyword：是否为关键字。
Isurl：是否为URL字符串。
以下是常见的单位检查函数：
Ispixel：是否为像素单位。
ispercentage：是否为百分比。
isem：是否为em单位。
isunit：是否为单位。

（三）、属性判断

.test(@number){
    background-color: #000;
    color: if(@number>0, black, white);
}

（四）、块级判断

.checkTopOrBottom (@direction,@color) when (@direction = top) , (@direction = bottom) {
    right: 0;
    height: 0;
    transform: scaleY(0.5);
    border-top: 1px solid @color;
}

.checkRightOrLeft (@direction,@color) when (@direction = right) , (@direction = left) {
    width: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: 1px solid @color;
}

.checkAll (@direction,@color) when (@direction = all) {
    width: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: 1px solid @color;
}

.retina-one-px-border(@direction , @color) {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    .checkTopOrBottom(@direction , @color);
    .checkRightOrLeft(@direction , @color);
    .checkAll(@direction , @color);
}

5、循环（相当于函数在内部多次调用）

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

div{
    .loop(5);
}

6、合并属性

// 逗号合并
.minix(){
    box-shadow+: inset 0 0 10px #555; 
}
.myclass{
    .minix;
    box-shadow+: inset 0 0 20px #222;
}
// 空格合并
.a(){
    background+_: #333; 
}
.aclass{
    .a;
    background+_: url("sss.jod");
}