Less系列之导入（Importing）

---

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

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

1、在标准CSS中，@import at-rules必须在所有其他类型的规则之前。但是Less不关心@import语句放在哪里。

.foo {
  background: #900;
}
@import "this-is-valid.less";

2、文件扩展

根据文件扩展名的不同，Less可能对@import语句进行不同的处理

• 如果文件的扩展名是.CSS，它将被视为CSS， @import语句保持原样；
• 如果它有任何其他扩展，它将被视为Less并且导入。
• 如果它没有扩展名，将追加.Less，并将其作为导入的Less文件。

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a Less file
@import "foo.css";  // statement left in place, as-is

3、导入选项

Less为CSS @import CSS at-rule提供了几个扩展，从而在处理外部文件时提供了更多的灵活性。

3.1、语法

@import (keyword) "filename";

3.2、keyword

• 【reference】——使用less文件但是不输出；
• 【inline】——在输出文件中包含源文件，但不处理它；
• 【less】——不管文件扩展名是什么，都将文件视为less文件；
• 【css】——不管文件扩展名是什么，都将文件视为css文件；
• 【once】——只包括文件一次（这是默认行为）；
• 【multiple】——包含文件多次；
• 【optional】——当文件没有找到时继续编译；

3.2.1、reference

Released v1.5.0

使用 @import (reference)导入外部文件，除非引用，否则不要将导入的样式添加到已编译的输出中。

示例

@import (reference) "foo.less";

引用会根据使用的方法(mixin或extend)产生不同的结果。

• extend：当一个选择器被扩展时，只有新的选择器被标记为未被引用，并且它被拉入到引用@import语句的位置。
• mixins：当引用样式被用作隐式mixin时，它的规则被混合，标记为“非引用”，并正常出现在引用位置。

3.2.2、inline

Released v1.5.0

使用@import(inline)包含外部文件，但不处理它们。

示例

@import (inline) "not-less-compatible.css";

3.2.3、less

Released v1.4.0

使用@import (less)将导入的文件视为less，无论文件扩展名如何。

示例

@import (less) "foo.css";

3.2.4、css

Released v1.4.0

使用@import (css)将导入的文件视为常规css，无论文件扩展名如何。这意味着import语句将保持原样。

示例

@import (css) "foo.less";

输出

@import "foo.less";

3.2.5、once

Released v1.4.0

@import语句的默认行为。这意味着该文件只被导入一次，并且该文件的后续导入语句将被忽略。

示例

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

3.2.6、multiple

Released v1.4.0

使用@import (multiple)允许导入多个同名文件。

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

输出为

.a {
  color: green;
}
.a {
  color: green;
}

3.2.7、optional

Released v2.3.0

使用@import(optional)只允许导入存在的文件。如果没有可选关键字Less，则会抛出FileError并在导入找不到的文件时停止编译。

3.3、每个@import允许有多个关键字，您必须使用逗号分隔关键字

@import (optional, reference) "foo.less";

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！