1.说明
由于很疑惑开源项目中对于less的使用，今天来实验一下，看看开源项目对less项目的配置到底是起什么作用的。
参考链接：
2.创建项目
mkdir learn-less
cd learn-less
yarn init
// 一律回车
yarn add less --dev
mkdir src
code ./
一切准备就绪，开始编码。
3.尝试编译
创建src\t01.less：
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
开始编译：
yarn lessc ./src/t01.less ./src/ty01.css
输出文件：
#header {
width: 10px;
height: 20px;
}
结论：实验可行。
4.导出说明
reference: 使用 Less 文件，但不输出。inline: 在输出中包含源文件，但不处理它。less: 无论文件的扩展名是什么，都将文件视为Less文件。css: 无论文件的扩展名是什么， 将文件作为CSS文件处理。once: 只包含一次文件（这是默认行为）。multiple: 多次纳入文件。optional: 当文件未找到时继续编译。
例子: @import (optional, reference) "foo.less";
5.once
5.1.实验1
创建src\t02.less：
@yiu-height: 30px;
.yiu-class {
color: pink;
}
创建src\t03.less：
@import "t02.less";
.height-1 {
height: @yiu-height;
}
@yiu-height: 20px;
.height-2 {
height: @yiu-height;
}
@import "t02.less";
.height-3 {
height: @yiu-height;
}
编译：
yarn lessc ./src/t03.less ./src/ty03.css
输出：
.yiu-class {
color: pink;
}
.height-1 {
height: 20px;
}
.height-2 {
height: 20px;
}
.height-3 {
height: 20px;
}
5.2.实验2
修改src\t03.less：
// @import "t02.less";
.height-1 {
height: @yiu-height;
}
@yiu-height: 20px;
.height-2 {
height: @yiu-height;
}
@import "t02.less";
.height-3 {
height: @yiu-height;
}
编译：
yarn lessc ./src/t03.less ./src/ty03.css
输出：
.height-1 {
height: 30px;
}
.height-2 {
height: 30px;
}
.yiu-class {
color: pink;
}
.height-3 {
height: 30px;
}
5.3.结论
默认的once导入，在在整个文件中只会生效一次。
6.multiple
修改src\t03.less：
@import "t02.less";
.height-1 {
height: @yiu-height;
}
@yiu-height: 20px;
.height-2 {
height: @yiu-height;
}
@import (multiple) "t02.less";
.height-3 {
height: @yiu-height;
}
编译：
yarn lessc ./src/t03.less ./src/ty03.css
输出：
.yiu-class {
color: pink;
}
.height-1 {
height: 30px;
}
.height-2 {
height: 30px;
}
.yiu-class {
color: pink;
}
.height-3 {
height: 30px;
}
结论：
通过multiple可以让less导入再次生效。
7.inline
修改src\t03.less：
@import (inline) "t02.less";
.height-1 {
height: @yiu-height;
}
@yiu-height: 20px;
.height-2 {
height: @yiu-height;
}
.height-3 {
height: @yiu-height;
}
输出css：
yarn lessc ./src/t03.less ./src/ty03.css
输出，可以看到输出了错误语法的css：
@yiu-height: 30px;
.yiu-class {
color: pink;
}
.height-1 {
height: 20px;
}
.height-2 {
height: 20px;
}
.height-3 {
height: 20px;
}
输出less：
yarn lessc ./src/t03.less ./src/ty03.less
输出：
@yiu-height: 30px;
.yiu-class {
color: pink;
}
.height-1 {
height: 20px;
}
.height-2 {
height: 20px;
}
.height-3 {
height: 20px;
}
结论：
就好像是傻傻的拷贝代码，并且这个inline还限定了导入的文件的作用域只有该引用的文件。
比如：A.less、B.less @import (inline) "A.less";、C.less @import (inline) "B.less";
C.less是获取不到A.less的变量的。
8.reference
修改：
@import (reference) "t02.less";
.height-1 {
height: @yiu-height;
}
.height-2 {
height: @yiu-height;
}
.height-3 {
height: @yiu-height;
}
编译：
yarn lessc ./src/t03.less ./src/ty03.css
输出：
.height-1 {
height: 30px;
}
.height-2 {
height: 30px;
}
.height-3 {
height: 30px;
}
结论：
reference只会将导入文件的变量一类的东西导入，但是不会导入导入文件的编译结果。