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 相反的行为。