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; }
Optional
用于 @import (optional) 仅在文件存在时才允许导入,如果没有optional关键字Less,则在导入找不到的文件时会引发FileError并停止编译。