Less基础，HBuilder x插件配置，使用

Less简介

Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言，属于 css 预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 既可以在 客户端 上运行 ，也可以借助 Node.js 在服务端运行。

Less编译工具

• vscode 的 Easy LESS 插件
• HBuilder x的Less插件

注释

以//开头的注释,不会被遍历到css文件中，这个是方便程序员自己看的
/**/包裹的注释会被编译到css文件中

变量

基本使用：使用@来申明一个变量:@pink:pink;

@width: 100px;
@height: 100px;

div {
  width: @width;
  height: @height;
}

延迟加载

当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量，这是Less语法的一个重点。

less文件
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

对应生成的css文件
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

嵌套

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

对应的css文件

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

父选择器

在嵌套规则中， & 表示父选择器，常用于给现有选择器添加伪类。

.header {
  a {
    color: blue;
    &:hover {
      color: green;
    }
  }
}

这里需要注意的是如果没有写&直接使用简单的嵌套生成的css文件是a :hover，中间会多一个空格导致此效果失效，除此之外，& 还能用于生成重复类名：

.button {
  &-ok {
    background-image: url('ok.png');
  }
  &-cancel {
    background-image: url('cancel.png');
  }

  &-custom {
    background-image: url('custom.png');
  }
}

生成的css文件

.button-ok {
  background-image: url('ok.png');
}
.button-cancel {
  background-image: url('cancel.png');
}
.button-custom {
  background-image: url('custom.png');
}

混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

带参数混合

.border(@width, @style, @color) {
  border: @width @style @color;
}
div {
  .border(1px, solid, #ccc);
}

匹配模式

.mixin(dark, @color) {
  color: darken(@color, 10%);
}
.mixin(light, @color) {
  color: lighten(@color, 10%);
}
// @_ 表示匹配所有
.mixin(@_, @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

效果

.class {
  color: #a2a2a2;
  display: block;
}

继承

extend();方法是用于继承的。
继承可以让多个选择器使用同一组属性，并且最后编辑为并集选择器。
她比混合更加好用更加便捷。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: green;
}

效果

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: green;
}