less使用

vscode安装less插件，可以直接使用，保存时会编译为.css文件

1.变量 @
@width: 10px;
@height: @width + 10px;

2.函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
@base: #f04615;
@width: 0.5;

.class {
width: percentage(@width); // returns 50%
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}

3.嵌套 层级嵌套，模仿dom结构，减少命名长度
下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：
.clearfix {
display: block;
zoom: 1;

&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

4.mixins 混合
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered(); // 当函数执行，把内容继承到这里
}

.post a {
color: red;
.bordered(); // 当函数执行，把内容继承到这里
}

5.计算

6.作用域 scope
1.先找自身的，再找mixins，最后找父级
2.header中的变量也会提升
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}

7.导入（Importing）
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import “library”; // library.less
@import “typo.css”;