Less系列之导入（Importing）

时间：2025-01-22 10:52:31

文章の目录

  • 1、在标准CSS中，@import at-rules必须在所有其他类型的规则之前。但是Less不关心@import语句放在哪里。
  • 2、文件扩展
  • 3、导入选项
    • 3.1、语法
    • 3.2、keyword
      • 3.2.1、reference
        • 示例
      • 3.2.2、inline
        • 示例
      • 3.2.3、less
        • 示例
      • 3.2.4、css
        • 示例
      • 3.2.5、once
        • 示例
      • 3.2.6、multiple
      • 3.2.7、optional
    • 3.3、每个@import允许有多个关键字，您必须使用逗号分隔关键字
  • 写在最后

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

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

.foo {
  background: #900;
}
@import "";

2、文件扩展

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

  • 如果文件的扩展名是.CSS，它将被视为CSS， @import语句保持原样；
  • 如果它有任何其他扩展，它将被视为Less并且导入。
  • 如果它没有扩展名，将追加.Less，并将其作为导入的Less文件。
@import "foo";      //  is imported
@import ""; //  is imported
@import "";  //  imported as a Less file
@import "";  // 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) "";

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

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

3.2.2、inline

Released v1.5.0

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

示例
@import (inline) "";

3.2.3、less

Released v1.4.0

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

示例
@import (less) "";

3.2.4、css

Released v1.4.0

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

示例
@import (css) "";

输出

@import "";

3.2.5、once

Released v1.4.0

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

示例
@import (once) "";
@import (once) ""; // this statement will be ignored

3.2.6、multiple

Released v1.4.0

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

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

输出为

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

3.2.7、optional

Released v2.3.0

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

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

@import (optional, reference) "";

写在最后

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

相关文章