4000 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();
}

嵌套规则

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

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

函数&运算

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

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