1.1在线安装
npm i -g less
1.2less编译成css
我是用的vscode里面的插件easy less来编译的，这个插件会直接将.less文件自动生成一个.css文件，方便初学者使用。之后可以和node来编译了，最好配合webpack的webpack.config.js文件去配置。
2.1使用
变量
less中的变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分的方便。
@bgColor:red;
body{color:@bgColor}
类名混入
在LESS中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性
.bordered {
border-top: solid 1px red;
border-bottom: solid 2px green;
}
.div1 {
color: yellow;
.bordered;
}
.div2 {
color: blue;
.bordered;
}
带参数的函数混入
在LESS中，你还可以像函数一样定义一个带参数的属性集合.
注意：在定义参数要传入默认值，如果没有默认值，调用的时候必须要传入值
.border-radius (@radius: 5px) {
border:1px solid red;
border-radius: @radius;
width:300px;
}
.div1 {
.border-radius(0px);
}
.div3 {
.border-radius;
}
.div2 {
.border-radius(20px);
}
arguments
@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量;
.pad(@top,@right,@bottom,@left) {
padding:@arguments;
}
div{
width:400px;
border:1px solid red;
.pad(10px,50px,100px,40px)
}
p
{
background-color: green;
}
导引表达式
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用;
.mixin (@a) when (@a =red) {
background-color: red;
}
.mixin (@a) when (@a =green) {
background-color: green;
}
.mixin (@a) {
color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }
嵌套
嵌套可以增强代码的层级关系，我们也可以通过嵌套来实现继承，这样很大程度减少了代码量，代码量看起来更加清晰。
#dvi1 {
color: red;
p {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
}
@import 导入选项
@import 可以至于任何你需要导入的地方
@import "style.css";
