https://lesscss.org/features/#import-atrules-feature
从其它样式表中导入样式。
在标准的CSS中,@import
规则必须放在所有其它类型的规则之前。但是Less并不关心你将@import语句放在哪里。
例如:
或者:
文件扩展名
@import语句可能会根据文件扩展名被Less以不同的方式处理:
- 如果文件扩展名为.css,它将被视为CSS,@import语句将保持原样。
- 如果它有其他任何扩展名,它将被视为Less并被导入。
- 如果没有扩展名,将添加.less扩展名,并将其作为导入的Less文件包含。
例如:
@import "foo"; // foo.less 被导入
@import "foo.less"; // foo.less 被导入
@import "foo.php"; // foo.php 作为一个Less 文件被导入
@import "foo.css"; // 保留声明原样
使用@import "foo";
使用@import "foo.less";
使用@import "bar.css";
Import 选项
Less为CSS @import CSS规则提供了几个扩展,以便在处理外部文件时提供更多的灵活性。
语法:
@import (keyword) "filename";
以下导入选项已被实现:
reference
:使用Less文件但不输出它inline
:将源文件包含在输出中但不做处理less
:无论文件扩展名如何,都将其视为Less文件css
:无论文件扩展名如何,都将其视为CSS文件once
:只包含文件一次(这是默认行为)multiple
:多次包含文件optional
:当找不到文件时继续编译
每个@import
语句允许使用多个关键字,你需要用逗号分隔这些关键字,例如:
@import (optional, reference) "foo.less";
reference
使用@import (reference)
导入外部文件,但除非被引用,否则不会将导入的样式添加到编译输出中。例如:@import (reference) "foo.less";
此外,reference
根据使用的方法(mixin
或extend
)产生不同的结果:
extend
:当一个选择器被扩展时,只有新的选择器被标记为未引用,并且它会被拉到reference
@import
语句的位置。mixins
:当reference
样式作为隐式mixin使用时,它的规则被混合进来,标记为“未引用”,并像往常一样出现在引用的地方。
例如:
extend外部文件中的样式:
作为mixin引用:
inline
使用@import (inline)
包含外部文件,但不处理它们。
当CSS文件可能与Less不兼容时,你将使用此方法;这是因为尽管Less支持大多数已知的标准CSS,但它不支持在某些地方的注释,也不支持所有已知的CSS hacks,除非修改CSS。
因此,你可以使用此方法将文件包含在输出中,以便所有CSS都位于一个文件中。
例如:
less
使用@import(less)
将导入的文件视为less,无论文件扩展名如何。例如:
@import (less) "foo.css";
css
使用@import(css)
将导入的文件视为普通css,无论文件扩展名如何。这意味着导入语句将保持原样。
例如:
once
@import
语句的默认行为。这意味着文件只导入一次,对该文件的后续导入语句将被忽略。
例如:
multiple
使用@import(multiple)
来允许导入多个具有相同名称的文件。这与once
的行为相反。
例如:
optional
使用@import(optional)
来仅在文件存在时导入。如果没有optional
关键字,less在导入找不到的文件时会抛出fileerror并停止编译。
没有加optional
,导入的文件不存在时报错:
加了optional
,导入的文件不存在时不会报错: