Less使用@import进行Mixins

Import 指令

从其他样式表导入样式

在标准CSS中，@ import at-rules必须在所有其他类型的规则之前。但Less.js并不关心你放置@import语句的位置

Example:

.foo {
  background: #900;
}
@import "this-is-valid.less";

File Extensions(文件扩展名)

@import 语句可能会被Less更少地处理，具体取决于文件扩展名：

• 如果文件具有.css扩展名，则将其视为CSS，并将@import语句保留为原样（请参阅下面的内联选项）。
• 如果它有任何其他扩展名，它将被视为更少并导入。
• 如果它没有扩展名，则会附加.less，它将作为导入的Less文件包含在内。

Example:

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

可以使用以下选项覆盖此行为。

Import 操作

Less提供了CSS @import CSS at-rule的几个扩展，以提供比使用外部文件更多的灵活性。

Syntax: @import (keyword) "filename";

已实现以下导入指令：

• reference:使用Less文件但不输出
• inline:在输出中包含源文件但不处理它
• less:无论文件扩展名是什么，都将文件视为Less文件
• css:无论文件扩展名是什么，都将文件视为CSS文件
• once:仅包含文件一次（这是默认行为）
• multiple:多次包含该文件
• optional:在找不到文件时继续编译

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

Example: @import (optional, reference) "foo.less";

 

 

常见文件：

　　1.使用less文件进行编写，需要导入其他css文件，则需要使用指定指令操作

　　　　例如：

@import (once,css,less) "filename"