使用

less代码可以在js中直接被编译，常见的使用less方法包括以下四种

1. 命令行编译

npm install -g less
lessc <less文件名> [<输出css文件名>]

2. IDE插件
   VSCode中安装Easy LESS插件，每当保存.less文件时自动生成同名css
3. 在node中引入less模块并编译，或其他第三方编译方式
4. 在浏览器中直接引用

• 在生产环境下应直接使用其他方式编译后生成的CSS，防止影响用户体验

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

注释

支持行注释和块注释

• 块注释 /* hello */ 会生成在CSS中的相应位置
• 行注释 //hello 总会被舍弃

导入（Importing）

多个less文件单独编译，因此variables/mixins/namespaces不能互相调用
通过@import可以在一个less中导入外部less(可省略后缀)或css，以使用其各种内容

@import "library"; // library.less
@import "typo.css";

功能

变量

通过@声明或使用变量

@width: 10px;
@height: @width + 10px;
.header {
  width: @width;
  height: @height;
}

混合（Mixins）

混合器（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
混合器可以具有参数，也可以用:为参数指定默认值
调用混合时如果有多个混合器，则自动编译参数符合数量的混合器(多个符合则均编译)

.red(@color,@font:50px) {
  color:@color;
  li {
    font-size:@font;
  }
}
#big {
  font-size:100px;
}
body {
  opacity: 0.5;
  .red(red);
  #big();
}

嵌套（Nesting）和命名空间 (Namespaces)

• 嵌套被展开时顺序不变
• &指向其自身
• @ 规则也可以嵌套在选择器内部或相互嵌套
• 嵌套也可以视为一个命名空间，用于对mixins和变量进行分组，命名空间内的mixins和变量如需被外部调用，必须通过通过.或>.
  为.bundle(){}时，.bundle .grey不会被输出，.bundle仅作为命名空间存在
  为.bundle{}时，.bundle .grey也会被输出
  • 变量会优先从当前命名空间(作用域)中查找，如果不存在则从“父”级作用域继承。

.bundle() {
  .grey{
    background-color: grey;
  }
}
.demo a {
  .bundle.grey();
}
.demo b {
 .bundle > .grey();
}

映射（Maps）

与命名空间不同，映射用于处理单个值，通过[]调用

#color(){
  b:blue;
}
body{
  background-color: #color[b];
}

四则运算

计算时如果单位换算无效或失去意义，则以左侧单位为准。
通常仅对LESS变量做运算并配合calc使用。

转义（Escaping）

带有~" "的内容被引用时会把" "去掉
配合@{ }可以引用选择器字符串

@min768: ~"(min-width: 768px)";
@header: ~"&:header";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
  @{header}{
    content:"hello world"
  }
}

函数（Functions）

主要用于判断、数组、字符串、运算、颜色处理