less的简单了解

less文档

第一次了解到less，是在看一个讲解vue的视频里得知的，之后一段时间也没空，趁着今天休闲，找到了less的文档，想对less有个简单的了解。
LESS，一种动态样式语言，将css赋予了动态的样式，如变量，继承，运算，函数。

变量
1. less变量的定义与css属性的声明类似

@color：#f7e65a
body{
    color:@color;
}

混合
2. 将一个定义好的类引入到另一个类中,可以带参数调用，也可以不带。

.border-cls(@radius:5px){
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
#bormore{
    .border-cls(10px);
}
body{
    .border-cls();
}

嵌套规则

1. 一个选择器中可以嵌套另一个选择器。

#header{
    color:red;
    p{
        font-size:18px;
        a{
            color:#aaffaa;
        }
    }
}

函数&运算
1. 运算指的是支持加减乘除运算

#input1{
    @color:#444;
    color:@color + #111;
}