less用法与运算规则

less是一种动态样式语言，是css的预处理器。（扩展了css语言让css语言有了逻辑，使得css方便扩展，维护复用）

可向下兼容，在less中可以写css

用法

（1）用于变量名与属性名

@hehe:content
@property:color
.@{hehe}{
    border:1px solid red;
    @{property}:red;
}

(2)用作属性值

@color:3eee4f
div{
    font-size:18px;
    color:@color

}

（3）公共路径

@baseurl:'./imgs/content/'
box1{
    background-image:'@{baseurl}a1.png';
}
box2{
    background-image:'@{baseurl}a2.png';
}
box3{
    background-image:'@{baseurl}a3.png';
}

(4)使用变量来引用变量

@abc:'hello';
@var:'abc';
.box::after{
    content:@@var  //得到hello
}

(5)可以先使用再声明变量（less中变量的值是延迟加载的）

div{
    width:@w
}
@w:33px;

(6)允许按照html层级嵌套,可以使用&来引用父选择器

.header{
    height:200px;
    span{
        width:200px;
        .left{
            color:@red
        }    
    }
}
.box{
    //.box-header
    &-header{
    }
}
@red:red

运算

任何值（数值，颜色，百分比都能计算）

会自动推算单位。数值与运算符之间要有空格。使用小括号可以提高优先级。

.hehe{
    width:30px*@num;//210px
    height:100px*5%;//5px
    margin-left:500%*@num;//3500%
    margin-right:200px-30%;//170px
    background-color:#fff-55;//也可以计算，十六进制转十进制计算最后转回16进制
}
@num:7