乐趣区

关于less: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";

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;}
退出移动版