less 新手入门（三）作为函数使用的 Mixin、@import 导入指令、@import 导入选项

三、作为函数使用的 Mixin

从 mixin 返回变量

在 mixin 中定义的所有变量都是可见的，并且可以在调用者的作用范围中使用 (除非调用者用相同的名称定义它自己的变量)。

.mixin(){
    @width:100%;
    @height:200px;
}
.caller{
    .mixin();
    width: @width;
    height: @height;
}

输出：

.caller {
  width: 100%;
  height: 200px;
}

因此，在 mixin 中定义的变量可以作为其返回值。这使我们可以像函数一样使用 .mixin 。

.average(@x, @y){
    @average:((@x + @y )/2);
}
div{
    .average(16px, 50px);
    padding: @average;
}

输出：

div {
  padding: 33px;
}

六、@import 导入指令

从其他样式表导入样式

在标准 CSS 中，@ import 规则必须优于所有其他类型的规则。但 Less.js 不关心 @ import 语句在代码中的具体位置。例如：

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

6.1 文件扩展名 - File extensions

@import 可以根据文件扩展的不同来不同地处理语句

如果文件有 .css 扩展名，将被视为 css，@ import 语句规则保持不变 (具体见下面的描述)。
如果它有任何其他扩展名，它将被视为 less 进行导入。
如果它没有扩展，.less 将被添加上，它将会作为一个 less 文件被添加。

@import "foo";      // 作为foo.less 被导入
@import "foo.less"; // 作为foo.less 被导入
@import "foo.php";  // foo.php 作为 a less file被导入
@import "foo.css";  // 保持原有的声明

可以使用以下选项覆盖该行为

七、导入选项

Less 为 CSS @import CSS at- rule 提供了几个扩展，以提供更多的灵活性，使您能够处理外部文件。

语法：@import (keyword) “filename”;

下面这些指令可以使用：

reference 使用 less 文件，但不要输出它
inline 在输出中包含源文件，但不处理它
less 无论文件扩展名是什么，将文件视为一个 less 文件
css 无论文件扩展名是什么，将文件视为一个 css 文件
once 只引入这个文件一次 (这是默认行为)
multiple 引入这个文件多次

7.1 reference

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

例如：

@import (reference) "foo.less";

reference 是 Less 语言中最强大的特性之一，想象一下，在导入的文件中，引用的每个指示符和选择器都带有一个引用标志，导入是正常的，但是当生成 CSS 时，“reference” 选择器 (以及任何包含 reference 选择器的媒体查询) 都不是输出。除非引用样式用作 mixins 或 extended，否则引用样式不会出现在生成的 CSS 中。

另外，根据使用的方法 (mixin 或 extend)，reference 会产生不同的结果:

extend 当一个选择器被 extended（扩展）时，只有新的选择器被标记为没有被引用 referenced，并且它被拉入到引用 @ import 语句的位置。
mixins 当 reference 样式用作隐式 mixin 时，它的规则是混合的，标记为 “not reference”，并在被引用的位置显示为正常

例子：

这允许您能从一个库中提取特定的、有针对性的样式，例如 bootstrap 通过做类似的事情来引导

.navbar:extend(.navbar all) {}

你只会引进来自 Bootstrap 的 navbar 相关样式

7.2 inline

使用 @import(inline) 包含外部文件，但不处理它们

发布 v1.5.0

例子：

@import (inline) "not-less-compatible.css";

当 CSS 文件可能不那么兼容时，您可以使用 inline ; 这是因为虽然 Less 支持大多数已知的标准 CSS，但它不支持某些地方的注释，不支持所有已知的 CSS hacks，而不修改 CSS。因此，您可以使用该文件将文件包含在输出中，这样所有的 CSS 都将在一个文件中。

7.3 less

使用 @ import(less) 来处理导入的文件，而不考虑文件扩展名。

@import (less) "foo.css";

7.4 css

使用 @ import(css) 将导入的文件视为常规的 css，而不考虑文件扩展名。这意味着 import 语句将被保留原样。

@import (css) "foo.less";

输出：

@import "foo.less";

7.5 once

@ import 语句的默认行为。这意味着该文件只导入一次，而该文件的后续导入语句将被忽略。

@import (once) "foo.less";
@import (once) "foo.less"; // 这条语句会被忽略

7.6 multiple

使用 @ import(多个) 允许导入具有相同名称的多个文件。这是和 once 相反的行为。