本文在前面已经介绍过 less 的 mixin、层叠结构的基础上继续介绍 less 中的命名空间和作用域的知识。而在了解了 less 中的命名空间和作用域之后，就可以向 less 中的另外一个重点：import 出发了。import 实现了 less 文件级别的代码重用。而与之类似的 important 关键字也在本文中顺便介绍。
1. less 中的命名空间
在 less 中，除了使用 class 进行混合，还可以使用 id 进行混和。这一点需要明确。
而被用于混合的对象，其内部也是可以有结构的，如下所示：
.myMixin() {
color: red;
.border {
border: 1px solid black;
}
}
可以看到 #myMaxin 中嵌套了一个 .border。
而命名空间的意义就在于，不仅可以混入 .myMixin() 这个整体；还可以对其中的一部分进行混入，例如 .myMixin>.border。
正是由于命名空间的存在，使得混入的应用范围进一步扩大。
需要注意的是，.border 后面是不需要待括号的；而使用这种方式取内部一部分的时候，最外面的 .myMixin 在调用的时候也不需要加括号了，也就是不需要写成 .myMixin()>.border。
上面过程中的 > 可以被 一个空格 所替代；这种行为符合 CSS 选择器中的规则。
最后，命名空间在习惯上使用 id 而不是 class 来命名。
2. less 中的作用域
为什么需要在 less 中涉及作用域的概念呢？实际上在 less 中引入作用域概念的原因和其它编程语言一样，就是为了找到同名变量，定义的其实是对变量的查找规则。而这个规则简单来说和 js 完全相同，也就是 就近原则。
3. less 中的 import — 引入
3.1 import .less
在 A.less 文件中，你可以通过关键字 import 引入另一个 less 文件 B.less。 引入之后就可以使用这个文件中的所有变量了！
import "./App.less";
例如，假设你的 App.less 文件中有这样一个混入定义：
// App.less
.myMixin() {
color: red;
font-size: 16px;
}
在 index.less 文件中，你可以这样使用：
// index.less
@import "./App.less";
.someElement {
.myMixin(); // 使用App.less中定义的混入
background-color: lightgray;
}
编译后的 CSS 将会包含 .myMixin 定义的样式，以及 index.less 中添加的额外样式：
/* 编译后的 CSS */
.someElement {
color: red;
font-size: 16px;
background-color: lightgray;
}
确保你的 @import 路径是正确的，Less 编译器能够找到并成功导入 App.less 文件。如果文件结构发生变化，或者使用了构建工具（如 webpack），可能需要调整 @import 语句中的路径以匹配新的文件位置。
3.2 import .css
你可以在 less 文件中使用 import 关键字引入其它的 less 文件。也可以引入一个 css 文件；只不过如果这样做了就无法进行 mixin 了。也就是说 less 文件被引入，其中的 class 或 id 选择器可以作为另一个文件的混入，但是 css 不可以（想想就不可以）！
那么 import 一个 css 文件的效果是什么呢？其实就是相当于将这个 css 文件的所有字符串贴在这个 less 文件中了而已！
3.3 import 带参数
import "./App.less"; 其实可以写成 import (x) "./App.less";，其中 x 被称为 import 参数，这些参数及其作用有：
- 【reference】——使用less文件但是不输出；
- 【inline】——在输出文件中包含源文件，但不处理它；
- 【less】——不管文件扩展名是什么，都将文件视为less文件；
- 【css】——不管文件扩展名是什么，都将文件视为css文件；
- 【once】——只包括文件一次（这是默认行为）；
- 【multiple】——包含文件多次；
- 【optional】——当文件没有找到时继续编译；
下面是一些示例：
当然可以，以下是根据前面提到的各个import选项提供的Less中的使用例子：
3.3.1. inline
// 假设我们有一个_variables.less文件，里面定义了一些变量
// _variables.less
@primary-color: #3498db;
// main.less
@import (inline) "_variables.less";
body {
background-color: @primary-color;
}
在这个例子中，_variables.less 文件中的内容会被直接插入到 main.less 文件中，而不是作为一个独立的文件处理。
3.3.2. reference
// _mixins.less
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
// main.less
@import (reference) "_mixins.less";
.button {
.border-radius(10px);
}
在这个例子中，_mixins.less 文件中定义的混入 .border-radius 可以在 main.less 中使用，但_mixins.less中的样式不会被直接输出到编译后的CSS中。
3.3.3. less
// styles.php (假设这个文件包含了一些Less代码，尽管它的扩展名是.php)
// ... Less code ...
// main.less
@import (less) "styles.php";
在这个例子中，即使文件扩展名是 .php，使用 (less) 选项也会强制Less编译器将其内容当作Less代码来处理。
3.3.4. css
// reset.css (一个纯CSS文件)
body, html {
margin: 0;
padding: 0;
}
// main.less
@import (css) "reset.css";
在这个例子中，reset.css 文件的内容会被当作纯CSS导入，并且不会被Less编译器进一步处理。
3.3.5. once (默认行为，通常不需要显式声明)
// _variables.less
@primary-color: #3498db;
// main1.less
@import "_variables.less";
body {
background-color: @primary-color;
}
// main2.less
@import "_variables.less"; // 即使这里再次导入，由于once是默认行为，_variables.less也只会被导入一次
.some-class {
color: @primary-color;
}
3.3.6. multiple (这个选项在实际使用中很少见，因为它可能导致样式重复)
3.3.7. optional（如果文件不存在，编译器不会报错）
// optional_styles.less (这个文件可能不存在)
// ... some optional styles ...
// main.less
@import (optional) "optional_styles.less"; // 如果文件不存在，编译器不会报错
在这个例子中，如果 optional_styles.less 文件不存在，编译器不会因为找不到文件而报错，而是继续编译其他代码。这可以用于包含可能不存在的可选样式文件。
4. less 中的关键字 important
其作用和在 css 文件中一致，是为了提升样式的权重。只不过在 less 中，可以将其加入到某个选择集的后面，这样整个 mixin 的权重就都会被提升！
.foo(){
.levelUp()!important;
}
原文链接：https://juejin.cn/post/7356234354119213108 作者：垂慕容
