Less 命名空间、作用域、import 和 important

本文在前面已经介绍过 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;
}