Less导入选项

发布时间:2020-10-24 整理:编程之家
编程之家收集整理的这篇文章主要介绍了Less导入选项编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!

Less 提供了css @import css规则的几个扩展,以提供更多的灵活性来处理外部文件。

语法: @import (keyword) "filename";

以下是导入指令的相关详情:

  • reference,使用较少的文件但不输出。
  • inline,在输出中包含源文件,但不对其进行处理。
  • less,无论文件扩展名为什么,都将其视为less文件。
  • css,无论文件扩展名为什么,都将其视为CSS文件。
  • once,仅包含一次文件(这是默认行为)。
  • multiple,多次包含文件。
  • optional,找不到文件时继续编译。

 

参考

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

reference 根据所使用的方法(混合还是扩展),会产生不同的结果:

  • mixin:当reference样式用作隐式mixin时,它的规则将被混合,标记为 “not reference”,并照常显示在被引用的位置。
  • extend:扩展选择器时,仅将新选择器标记为未引用,并将其拉入引用 import 语句的位置。

 

Inline

使用 @import (inline) 包括外部文件,但不能对其进行处理。

 

Less

使用 @import (less) 治疗导入的文件一样都不能少,无论文件扩展名。

@import (less) "main.css";

 

CSS

使用 @import (css) 治疗导入的文件作为常规CSS,无论文件扩展名,也就意味着import语句将保持原样。

@import (css) "main.less";

// 输出
@import "main.less";

 

Once

@import 语句的默认行为,也就意味着该文件仅导入一次,该文件的后续导入语句将被忽略。

@import (once) "main.less";
// 此语句将被忽略
@import (once) "main.less";

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

Multiple

使用 @import (multiple) 允许使用相同的名称导入的多个文件,这是一次相反的行为。

// file: main.less
div {
      color: green;
}
// file: index.less
@import (multiple) "main.less";
@import (multiple) "main.less";
    
// 输出结果
div {
      color: green;
}
div {
      color: green;
}

 

Optional

用于 @import (optional) 仅在文件存在时才允许导入,如果没有optional关键字Less,则在导入找不到的文件时会引发FileError并停止编译。

总结

以上是编程之家为你收集整理的Less导入选项全部内容,希望文章能够帮你解决Less导入选项所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!