less的使用

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";