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

巴特西

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

6.1 文件扩展名 - File extensions

7.1 reference

7.2 inline

7.3 less

7.4 css

7.5 once

7.6 multiple

最新文章

热门文章

巴特西

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

6.1 文件扩展名 - File extensions

7.1 reference

7.2 inline

7.3 less

7.4 css

7.5 once

7.6 multiple

最新文章

热门文章

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