less新手入门（三） 作为函数使用的Mixin、@import 导入指令 、@import 导入选项
- 从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;
}
- 从其他样式表导入样式
在标准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 相反的行为。
