LESS语言功能的深入指南。请参阅概述快速总结Less。

有关安装和设置Less环境的深入指南，以及有关为Less开发的文档，请参阅：使用Less.js.

控制单个位置中常用的值。

概述

经常会看到相同的值重复出现几十次如果不是数百次跨样式表：

一,.link链接{颜色:#4280亿卡;}.widget（小部件）{颜色:#飞行频率;背景:#4280亿卡;}

变量为您提供了从单个位置控制这些值的方法，从而使代码更易于维护：

//变量
@链接颜色：        #4280亿卡;//海蓝色
@链接颜色：  使变暗(@链接颜色,10%);//用法
一,.link链接{颜色:@链接颜色;}一：悬停{颜色:@链接-颜色;}.widget（小部件）{颜色:#飞行频率;背景:@链接颜色;}

变量插值

上面的例子侧重于使用变量控制CSS规则中的值，但也可以在其他地方使用，例如选择器名称、属性名称、URL和@导入声明。

选择器

第1.4.0版

//变量
@我的选择器：横幅；//用法
.@{my-selector}{字体加粗：粗体；线路高度:40像素;边缘:0自动；}

编译为：

.横幅{字体加粗：粗体；线路高度:40像素;边缘:0自动；}

URL

//变量
@图像： “../img”;//用法
身体{颜色:#444;背景：url(“@{images}/white-sand.png”);}

导入对账单

第1.4.0版

语法：@导入“@{themes}/tidal-wave.less”；

请注意，在v2.0.0之前，只考虑在根或当前范围中声明的变量，并且在查找变量时只考虑当前文件和调用文件。

例子：

//变量
@主题： “../../src/themes”;//用法
@导入 “@{themes}/tidal-wave.less”;

属性

1.6.0版

@属性：颜色；.小部件{@{属性}:#0参见;背景-@{property}:#999;}

编译为：

.widget（小部件）{颜色:#0参见;背景色:#999;}

变量

在Less中，您可以使用另一个变量定义变量的名称。

@主要：绿色；@次要：蓝色；.节{@颜色：初级；.元素{颜色:@@颜色;}}

其编译为：

.节 .元素{颜色：绿色；}

懒惰的评估

变量在使用之前不必声明。

有效的Less代码段：

.懒惰的eval{宽度:@无功功率，无功功率;}@var（变量）： @一个;@答： 9%;

这是有效的Less也是：

.lazy-val型{宽度:@无功功率，无功功率;@答： 9%;}@var（变量）： @一个;@答： 100%;

两者都编译为：

.lazy-val型{宽度:9%;}

当定义变量两次时，使用变量的最后一个定义，从当前范围向上搜索。这类似于css本身，其中定义内的最后一个属性用于确定值。

例如：

@var（变量）： 0;.class类{@var（变量）： 1;.黄铜{@变量： 2;三:@无功功率，无功功率;@var（变量）： 三;}一:@无功功率，无功功率;}

编译为：

.class类{一:1;}.class类 .黄铜{三:三;}

基本上，每个范围都有一个“最终”值，类似于浏览器中的属性，例如使用自定义属性的示例：

.标头{--颜色：白色；颜色:无功功率，无功功率（--颜色）；//这个颜色是黑色的
  --颜色：黑色；}

这意味着，与其他CSS预处理语言不同，Less变量的行为与CSS非常相似。

属性作为变量（新增！）

3.0.0版

您可以使用$道具语法。有时这可以让你的代码更简洁。

.widget（小部件）{颜色:#efefef公司;背景色：$color；}

编译为：

.widget（小部件）{颜色:#efefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefefef;背景色:#efefef公司;}

注意，与变量一样，Less将选择当前/父范围内的最后一个属性作为“最终”值。

.块{颜色：红色；.内部{背景色：$color；}颜色：蓝色；}

编译为：

.块{颜色：红色；颜色：蓝色；}.块 .内部{背景色：蓝色；}

默认变量

我们有时会收到对默认变量的请求，即只有在尚未设置变量的情况下才能设置变量。此功能不是必需的，因为您可以通过事后放置定义轻松覆盖变量。

例如：

//图书馆
@基色：绿色；@深色： 使变暗(@基色,10%);//图书馆的使用
@导入 “库.less”;@基色：红色；

这很好，因为惰性加载-@基色被覆盖，并且@深色是深红色。

使用引用父选择器&

这个&运算符表示的父选择器嵌套规则并且在将修改类或伪类应用于现有选择器时最常用：

一{颜色：蓝色；&：悬停{颜色：绿色；}}

结果如下：

一{颜色：蓝色；}一：悬停{颜色：绿色；}

请注意，没有&，上述示例将导致a：悬停rule（子选择器，用于匹配<a>标签），这不是我们通常希望的嵌套：悬停.

“父选择器”操作符有多种用途。基本上，任何时候都需要以默认方式以外的其他方式组合嵌套规则的选择器。例如&是为了生成重复的类名：

.按钮{&-好的{背景-图像：url(“ok.png”);}&-取消{背景-图像：url(“取消.png”);}&-自定义{背景-图像：url(“自定义.png”);}}

输出：

.按钮-确定{背景-图像：url(“ok.png”);}.按钮-取消{背景-图像：url(“取消.png”);}.按钮-自定义{背景-图像：url(“自定义.png”);}

多个&

&可能在选择器中出现多次。这使得可以重复引用父选择器而不重复其名称。

.链接{&+&{颜色：红色；}& &{颜色：绿色；}&&{颜色：蓝色；}&,&1.n.（ish）人名；（英）伊什{颜色：青色；}}

将输出：

.link链接+.link链接{颜色：红色；}.link链接 .link链接{颜色：绿色；}.link链接.link链接{颜色：蓝色；}.link链接,.linkish链接{颜色：青色；}

请注意&表示所有父选择器（不仅仅是最近的祖先），因此以下示例：

千美元{.父级{&>&{颜色：红色；}& &{颜色：绿色；}&&{颜色：蓝色；}&,&1.n.（ish）人名；（英）伊什{颜色：青色；}}}

结果如下：

千美元 .父级>千美元 .父级{颜色：红色；}千美元 .父级 千美元 .父级{颜色：绿色；}千美元 .父级千美元 .父级{颜色：蓝色；}千美元 .父级,千美元 .带父母色彩{颜色：青色；}

更改选择器顺序

在继承的（父）选择器之前添加选择器可能很有用。这可以通过将&在当前选择器之后。例如，在使用Modernizer时，您可能希望根据支持的功能指定不同的规则：

.标题{.菜单{边界半径:5像素;.no-订单半径 &{背景-图像：url('图像/button-background.png');}}}

选择器.no-订单半径&将预先发送.no-订单半径到其父级.header菜单形成.no-borderradius.header.menu输出时：

.标头 .菜单{边界半径:5像素;}.no-订单半径 .标头 .菜单{背景-图像：url('图像/button-background.png');}

组合爆炸

&也可用于在逗号分隔的列表中生成选择器的每个可能排列：

第页,一,ul公司,锂{边界顶部:2像素星罗棋布的#366;&+&{边界顶部:0;}}

这扩展到指定元素的所有可能（16）组合：

第页,一,ul公司,锂{边界顶部:2像素星罗棋布的#366;}第页+第页,第页+一,第页+ul公司,第页+锂,一+第页,一+一,一+ul公司,一+锂,ul公司+第页,ul公司+一,ul公司+ul公司,ul公司+锂,锂+第页,锂+一,锂+ul公司,锂+锂{边界顶部:0;}

从其他样式表导入样式

在标准CSS中，@导入at-rules必须先于所有其他类型的规则。但Less不在乎你放在哪里@导入声明。

例子：

.foo文件{背景:#900;}@导入 “this-is有效。less”;

文件扩展名

@导入根据文件扩展名，Less可能会对语句进行不同的处理：

• 如果文件具有.css文件扩展，它将被视为CSS和@导入语句左为-is（请参见内联选项以下）。
• 如果有任何其他扩展它将被视为Less并进口。
• 如果没有分机，更少将追加，并将其作为导入的Less文件包含。

示例：

@导入 “foo”;//foo.less已导入
@导入 “foo.less”;//foo.less已导入
@导入 “foo.php”;//foo.php作为Less文件导入
@进口 “foo.css”;//语句留在原处，as-is

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

导入选项

Less为CSS提供了几个扩展@导入CSS at-rule提供了更大的灵活性，可以处理外部文件。

语法：@导入（关键字）“文件名”；

已实现以下导入选项：

• 参考：使用Less文件但不输出
• 内联：在输出中包含源文件，但不处理它
• 较少的：将文件视为Less文件，无论文件扩展名是什么
• css公司：将文件视为CSS文件，无论文件扩展名是什么
• 一旦：仅包含该文件一次（这是默认行为）
• 倍数：多次包含文件
• 可选择的：找不到文件时继续编译

每个关键字不止一个@导入如果允许，则必须使用逗号分隔关键字：

例子：@导入（可选，参考）“foo.less”；

参考

使用@导入（参考）以导入外部文件，但除非被引用，否则不将导入的样式添加到编译的输出中。

已发布1.5.0版

例子：@导入（引用）“foo.less”；

想象一下参考用标记每个at规则和选择器参考标志在导入的文件中，按正常方式导入，但在生成CSS时，不会输出“引用”选择器（以及仅包含引用选择器的任何媒体查询）。参考除非引用样式用作混入或扩展.

此外，参考根据使用的方法（mixin或extend）产生不同的结果：

• 延伸：扩展选择器时，只有新选择器标记为未引用，并将其拉入参考位置@导入声明。
• 混入：当参考样式用作隐式混合蛋白，其规则是混合的，标记为“not reference”，并正常显示在引用位置。

参考示例

这允许您仅从库（例如引导程序通过这样做：

.navbar（导航栏）：扩展(.navbar（导航栏） 全部的) {}

你只会拉进来.navbar（导航栏）Bootstrap中的相关样式。

内联

使用@导入（内联）包括外部文件，但不处理它们。

已发布1.5.0版

例子：@导入（内联）“不兼容.css”；

当CSS文件可能不兼容时，您将使用此选项；这是因为尽管Less支持大多数已知的标准CSS，但它在某些地方不支持注释，并且在不修改CSS的情况下不支持所有已知的CSS攻击。

因此，您可以使用此选项将文件包含在输出中，以便所有CSS都位于一个文件中。

较少的

使用@进口（减）将导入的文件视为Less，而不考虑文件扩展名。

已发布第1.4.0版

例子：

@导入（减去）“foo.css”;

css公司

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

已发布第1.4.0版

例子：

@导入（css）“foo.less”;

输出

@导入 “foo.less”;

一旦

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

已发布第1.4.0版

这是的默认行为@导入声明。

例子：

@导入（一次）“foo.less”;@导入（一次）“foo.less”;//此语句将被忽略

倍数

使用@导入（多个）以允许导入具有相同名称的多个文件。这是与一次相反的行为。

已发布第1.4.0版

例子：

//文件：foo.less
.a个{颜色：绿色；}//文件：main.less
@导入（多个）“foo.less”;@导入（多个）“foo.less”;

输出

.a个{颜色：绿色；}.a个{颜色：绿色；}

可选择的

使用@导入（可选）只允许在文件存在时导入文件。没有可选择的关键字Less在导入找不到的文件时抛出FileError并停止编译。

已发布2.3.0版

Extend是一个Less伪类，它将放置在其上的选择器与匹配其引用的选择器合并。

已发布第1.4.0版

导航 ul公司{&：扩展(.内联);背景：蓝色；}

在上面的规则集中：扩展选择器将应用“扩展选择器”(导航ul)上的.内联班无论在哪里.内联类出现。声明块将保持原样，但没有任何对extend的引用（因为extend不是css）。

因此，如下所示：

导航 ul公司{&：扩展(.内联);背景：蓝色；}.内联{颜色：红色；}

输出

导航 ul公司{背景：蓝色；}.内联,导航 ul公司{颜色：红色；}

请注意导航ul:extend（.inline）选择器将输出作为导航ul-扩展在输出之前被删除，选择器块保留为-is。如果该块中没有任何属性，则会从输出中删除它（但扩展仍可能影响其他选择器）。

扩展语法

扩展可以附加到选择器，也可以放置到规则集中。它看起来像一个伪类，可选地在选择器参数后面跟关键字全部的:

例子：

.a个：扩展(.b类) {}//上面的块与下面的块执行相同的操作
.a个{&：扩展(.b类);}

.c类：扩展(.d日 全部的) {//扩展“.d”的所有实例，例如“.x.d”或“.d.x”}.c类：扩展(.d日) {//仅扩展选择器输出为“.d”的实例}

它可以包含一个或多个要扩展的类，用逗号分隔。

例子：

.电子：扩展(.f型) {}.电子：扩展(.克) {}//上面和下面做同样的事情
.电子：扩展(.f型,.克) {}

延伸附加到选择器

附加到选择器的Extend看起来像是一个将选择器作为参数的普通伪类。选择器可以包含多个扩展子句，但所有扩展都必须位于选择器的末尾。

• 在选择器之后延伸：pre：悬停：扩展（div pre）.
• 选择器和扩展之间允许有空格：pre：悬停：扩展（div pre）.
• 允许多个扩展：pre:hover:extend（div pre）：扩展（.bucket-tr）-注意，这与pre：悬停：扩展（div pre，.bucket tr）
• 这是不允许的：pre:hover:extend（div-pre）.nth-child（奇数）。Extend必须是最后一个。

如果规则集包含多个选择器，则其中任何一个都可以具有extend关键字。在一个规则集中具有扩展的多个选择器：

.大直径,.大银行：扩展(.袋子),.大杯：扩展(.铲斗) {//车身}

扩展内部规则集

可以使用将Extend放置到规则集的正文中&：扩展（选择器）语法。将扩展放置到主体中是将其放置到该规则集的每个选择器中的快捷方式。

在实体内部延伸：

之前：悬停,.some-类{&：扩展(分区 之前);}

与在每个选择器后添加扩展完全相同：

之前：悬停：扩展(分区 之前),.some-类：扩展(分区 之前) {}

扩展嵌套选择器

Extend能够匹配嵌套选择器。以下较少：

例子：

.铲斗{信托收据{//带有目标选择器的嵌套规则集
    颜色：蓝色；}}.some-类：扩展(.铲斗 信托收据) {}//已识别嵌套规则集

输出

.铲斗 信托收据,.一些课程{颜色：蓝色；}

本质上，扩展查看的是编译后的css，而不是原来的css。

例子：

.铲斗{信托收据 &{//带有目标选择器的嵌套规则集
    颜色：蓝色；}}.some-类：扩展(信托收据 .铲斗) {}//已识别嵌套规则集

输出

信托收据 .铲斗,.some-类{颜色：蓝色；}

使用Extend精确匹配

默认情况下，Extend会查找选择器之间的精确匹配。选择器是否使用前导星并不重要。两个n表示具有相同的含义并不重要，它们需要具有相同的形式才能匹配。唯一的例外是属性选择器中的引号，很少有人知道它们有相同的含义并与之匹配。

例子：

.a个.class类,.class类.a个,.class类>.a个{颜色：蓝色；}.测试：扩展(.class类) {}//这与上面的任何选择器都不匹配

明星确实很重要。选择器*.class类和.class类是等效的，但extend与它们不匹配：

*.class类{颜色：蓝色；}.noStar（无星）：扩展(.class类) {}//这与*.class选择器不匹配

输出

*.class类{颜色：蓝色；}

伪类的顺序很重要。选择器链接：悬停：已访问和链接：已访问：悬停匹配同一组元素，但extend将它们视为不同的：

链接：悬停：已访问{颜色：蓝色；}.选择器：扩展(链接：已访问：悬停) {}

输出

链接：悬停：已访问{颜色：蓝色；}

第n个表达式

第N种表达形式确实很重要。N个表达式1个+3个和n+3个是等效的，但extend与它们不匹配：

：第n个子级(1n个+三) {颜色：蓝色；}.child（儿童）：扩展(：第n个子级（n）+三)) {}

输出

：第n个子级(1n个+三) {颜色：蓝色；}

属性选择器中的引号类型无关紧要。以下所有内容都是等效的。

[标题=标识符]{颜色：蓝色；}[title=“标识符”]{颜色：蓝色；}[标题=“标识符”]{颜色：蓝色；}.no报价：扩展([标题=标识符]) {}.单引号：扩展([title=“标识符”]) {}.双引号：扩展([标题=“标识符”]) {}

输出

[标题=标识符],.no报价,.单引号,.双引号{颜色：蓝色；}[title=“标识符”],.no报价,.单引号,.双引号{颜色：蓝色；}[标题=“标识符”],.no报价,.single报价,.双引号{颜色：蓝色；}

扩展“全部”

当您在扩展参数中最后指定all关键字时，它会告诉Less将该选择器作为另一个选择器的一部分进行匹配。选择器将被复制，选择器的匹配部分将被扩展替换，从而生成一个新的选择器。

例子：

.a个.b类.测试,.测试.c类{颜色：橙色；}.测试{&：悬停{颜色：绿色；}}.更换：扩展(.测试 全部的) {}

输出

.a个.b类.测试,.测试.c类,.a个.b类.更换,.更换.c类{颜色：橙色；}.测试：悬停,.更换：悬停{颜色：绿色；}

您可以将此操作模式视为进行非破坏性搜索和替换。

带延伸的选择器插值

Extend是不能够将选择器与变量匹配。如果选择器包含变量，extend将忽略它。

然而，扩展可以附加到插值选择器。

变量选择器将不匹配：

@变量：.铲斗；@{变量}{//插值选择器
  颜色：蓝色；}.一些课程：扩展(.铲斗) {}//什么都不做，找不到匹配项

和extend with variable in target selector不匹配任何内容：

.铲斗{颜色：蓝色；}.some-类：扩展(@{变量}) {}//插值选择器不匹配任何内容
@变量：.铲斗；

上述两个示例都编译为：

.铲斗{颜色：蓝色；}

然而，：扩展连接到插值选择器工作：

.铲斗{颜色：蓝色；}@{变量}：扩展(.铲斗) {}@变量：.选择器；

编译为：

.铲斗,.选择器{颜色：蓝色；}

范围界定/内部扩展@媒体

目前：扩展在内部@媒体声明将只匹配同一媒体声明中的选择器：

@媒体打印{.screen类：扩展(.选择器) {}//在介质内部扩展
  .选择器{//这将是匹配的-它在同一媒体中
    颜色：黑色；}}.选择器{//样式表顶部的规则集-extend忽略它
  颜色：红色；}@媒体屏幕{.选择器{//另一媒体内的规则集-extend忽略它
    颜色：蓝色；}}

编译为：

@媒体打印{.选择器,.screenClass（屏幕类）{/*扩展了同一媒体中的规则集*/
    颜色：黑色；}}.选择器{/*忽略了样式表顶部的规则集*/
  颜色：红色；}@媒体屏幕{.选择器{/*忽略了另一个媒体中的规则集*/
    颜色：蓝色；}}

注意：扩展与嵌套中的选择器不匹配@媒体宣言：

@媒体屏幕{.screen类：扩展(.选择器) {}//在介质内部扩展
  @媒体（最小宽度：1023像素) {.选择器{//嵌套媒体内的规则集-extend忽略它
      颜色：蓝色；}}}

这将编译为：

@媒体屏幕和（最小宽度：1023像素) {.选择器{/*忽略了另一个嵌套媒体中的规则集*/
    颜色：蓝色；}}

顶级扩展匹配所有内容，包括嵌套介质中的选择器：

@媒体屏幕{.选择器{/*嵌套媒体内部的规则集-顶级扩展有效*/
    颜色：蓝色；}@媒体（最小宽度：1023像素) {.选择器{/*嵌套媒体内部的规则集-顶级扩展有效*/
      颜色：蓝色；}}}.top级别：扩展(.选择器) {}/*顶级扩展匹配所有内容*/

编译为：

@媒体屏幕{.选择器,.top级别{/*媒体内的规则集已扩展*/
    颜色：蓝色；}}@媒体屏幕和（最小宽度：1023像素) {.选择器,.top级别{/*嵌套媒体内的规则集已扩展*/
    颜色：蓝色；}}

重复检测

目前没有重复检测。

例子：

.alert-info（警报信息）,.widget（小部件）{/*声明*/}.警报：扩展(.alert-info（警报信息）,.widget（小部件）) {}

输出

.alert-info（警报信息）,.widget（小部件）,.警报,.警报{/*声明*/}

扩展的用例

经典用例

典型的用例是避免添加基类。例如，如果您有

.动物{背景色：黑色；颜色：白色；}

如果你想让动物的子类型覆盖背景色，那么你有两个选择，首先改变HTML

<一 班=“动物熊”>熊</一>

.动物{背景色：黑色；颜色：白色；}.熊{背景色：棕色；}

或者简化html并在less中使用extend。例如

<一 班=“熊”>熊</一>

.动物{背景色：黑色；颜色：白色；}.熊{&：扩展(.动物);背景色：棕色；}

减小CSS大小

混合将所有属性复制到选择器中，这可能导致不必要的重复。因此，您可以使用extends而不是mixin将选择器向上移动到您希望使用的属性，从而减少生成的CSS。

示例-使用mixin：

.my-inline-block（.my-inline块）() {显示：内联块；字体大小:0;}.事物1{.my-inline-block（.my-inline块）;}.事物2{.my-inline-block（.my-inline块）;}

输出

.事物1{显示：内联块；字体大小:0;}.事物2{显示：内联块；字体大小:0;}

示例（带延伸）：

.my-inline-block（.my-inline块）{显示：内联块；字体大小:0;}.事物1{&：扩展(.我的内联块);}.事物2{&：扩展(.my-inline-block（.my-inline块）);}

输出

.my-inline-block（.my-inline块）,.事物1,.事物2{显示：内联块；字体大小:0;}

组合样式/A更高级的混音

另一个用途是作为mixin的替代品，因为mixin只能与简单的选择器一起使用，如果您有两个不同的html块，但需要对两者应用相同的样式，则可以使用extends关联两个区域。

例子：

锂.list（列表）>一{//列表样式}按钮.list样式{&：扩展(锂.list（列表）>一);//使用相同的列表样式}

合并属性

这个合并该特性允许将多个属性中的值聚合到单个属性下的逗号或空格分隔列表中。合并对于背景和变换等属性很有用。

逗号

用逗号附加属性值

已发布1.5.0版

例子：

.混合蛋白() {盒子阴影+：插图0 0 10像素 #555;}.my类{.混合蛋白();盒子阴影+:0 0 20像素黑色；}

输出

.my类{盒子阴影：插入0 0 10像素 #555,0 0 20像素黑色；}

空间

用空格附加属性值

已发布1.7.0版

例子：

.混合蛋白() {转型+_:规模(2);}.my类{.混合蛋白();转型+_:旋转(15度);}

输出

.my类{转型:规模(2)旋转(15度);}

为了避免任何无意的连接，合并需要显式+或+_标记每个join挂起的声明。

现有样式的“混合”属性

您可以混合使用类选择器和id选择器，例如。

.a个,#b条{颜色：红色；}.mixin类{.a个();}.mixin-id文件{#b条();}

这将导致：

.a个,#b条{颜色：红色；}.mixin类{颜色：红色；}.mixin-id文件{颜色：红色；}

从历史上看，mixin调用中的括号是可选的，但不推荐使用可选括号，将来的版本中将需要使用。

.a个();.a个;//目前有效，但已弃用；不使用
.a个();//括号前的空格也已弃用

带括号的混音

如果您想创建一个mixin，但又不希望该mixin出现在CSS输出中，请在mixin定义后面放上括号。

.my-mixin（我的名字）{颜色：黑色；}.my-other-mixin（我的另一半）() {背景：白色；}.class类{.my-mixin（我的名字）();.my-other-mixin（我的另一半）();}

输出

.my-mixin（我的名字）{颜色：黑色；}.class类{颜色：黑色；背景：白色；}

混音器中的选择器

Mixin不仅可以包含属性，还可以包含选择器。

例如：

.my-hover-mixin() {&：悬停{边境:1像素固体红；}}按钮{.my-hover-mixin();}

输出

按钮：悬停{边境:1像素固体红；}

命名空间

如果要在更复杂的选择器中混合属性，可以堆叠多个id或类。

#外部() {.内部{颜色：红色；}}.c类{#外部.内部();}

注意：legacy Less语法允许>名称空间和mixin之间的空白。此语法已弃用，可能会被删除。目前，它们也在做同样的事情。

#外部>.内部();//已弃用
#外部 .内部();//已弃用
#外部.内部();//首选

像这样对您的mixin进行名称间隔可以减少与其他库mixin或用户mixin的冲突，但也可以是“组织”mixin组的一种方式。

例子：

#my-library公司{.my-mixin（我的名字）() {颜色：黑色；}}//可以这样使用
.class类{#my-library公司.my-mixin（我的名字）();}

受保护的命名空间

如果名称空间具有保护，则仅当保护条件返回true时才使用由其定义的mixin。名称空间保护的计算结果与mixin上的保护完全相同，因此以下两个mixin的工作方式相同：

#命名空间 什么时候(@模式=巨大）{.混合蛋白() {/* */}}#命名空间{.混合蛋白()什么时候(@模式=巨大）{/* */}}

这个违约假设函数对所有嵌套命名空间和mixin具有相同的值。以下mixin从未进行评估；其中一名保安保证是假的：

#sp_1型 什么时候(违约()) {#sp_2类 什么时候(违约()) {.混合蛋白()什么时候 不(违约()) {/* */}}}

这个!重要的关键字

使用!重要的mixin调用后的关键字，将其继承的所有属性标记为!重要的:

例子：

.foo文件(@背景:#f5f5f5型,@颜色:#900) {背景:@背景;颜色:@颜色;}.不重要{.foo文件();}.重要{.foo文件() !重要；}

结果如下：

.不重要{背景:#f5f5f5型;颜色:#900;}.重要{背景:#f5f5f5型!重要；颜色:#900!重要；}

如何将参数传递给mixin

混音器还可以接受参数，这些参数是混音时传递给选择器块的变量。

例如：

.边界半径(@半径) {-网络工具包-订单-半径:@半径;-莫氏边界半径:@半径;边界半径:@半径;}

以下是我们如何将其混合到各种规则集中：

#收割台{.边界半径(4像素);}.按钮{.边界半径(6像素);}

参数化混合体的参数也可以具有默认值：

.边界半径(@半径:5像素) {-网络工具包-订单-半径:@半径;-莫氏边界半径:@半径;边界半径:@半径;}

我们现在可以这样调用它：

#收割台{.边界半径();}

它将包括一个5像素的边界半径。

也可以使用不带参数的参数混合。如果您想从CSS输出中隐藏规则集，但又想将其属性包含在其他规则集中，这将非常有用：

.wrap（包裹）() {文本换行：包裹；空白：-moz-预包装；空白：预包装；文字包装：断字；}之前{.wrap（包裹）() }

它将输出：

之前{文本换行：包裹；空白：-moz-预包装；空白：预包装；文字包装：断字；}

参数分隔符

参数当前为分号或逗号分开。

最初，参数仅由逗号分隔，但后来添加了分号以支持将逗号分隔的列表值传递给单个参数。

注意：从Less4.0开始，可以使用paren转义来包装列表值[~()]，例如。.name（@param1:~（红色，蓝色））。这类似于引号转义语法：~“报价”这可能会使你的代码库中不需要分号分隔符。

示例：

• 两个参数，每个参数包含逗号分隔的列表：.name（1、2、3；something，else）
• 三个参数，每个参数包含一个数字：.名称（1，2，3）
• 使用伪分号创建一个mixin调用，其中一个参数包含逗号分隔的css列表：.名称（1，2，3；）.注意：如果后面的分号看起来很奇怪，您可能会选择：.name（~（1，2，3））
• 编写以逗号分隔的默认值的方法：
  • @参数值：红色、蓝色。名称（@param1:@param-values）.
  • .name（@param1:红色，蓝色；）
  • .name（@param1:~（红色，蓝色））

混合料过载

使用相同的名称和参数数量定义多个mixin是合法的。Less将使用所有适用的属性。如果您使用带有一个参数的mixin，例如。mixin（绿色）；，则将使用只有一个强制参数的所有mixin的属性：

.混合蛋白(@颜色) {颜色-1:@颜色;}.混合蛋白(@颜色,@填充:2) {颜色-2:@颜色;衬垫-2:@填充;}.混合蛋白(@颜色,@填充,@保证金:2) {颜色-3:@颜色;填充-3:@填充;边缘:@保证金 @保证金 @保证金 @保证金;}.一些 .选择器 分区{.混合蛋白(#008000);}

编译为：

.一些 .选择器 分区{颜色-1:#008000;颜色-2:#008000;填充-2:2;}

命名的参数

mixin引用可以通过参数的名称而不仅仅是位置来提供参数值。任何参数都可以通过其名称引用，它们不必按任何特殊顺序排列：

.混合蛋白(@颜色：黑色；@保证金:10像素;@填充:20像素) {颜色:@颜色;边缘:@保证金;衬垫:@填充;}.类别1{.混合蛋白(@保证金:20像素;@颜色:#33acfe型);}.第2类{.混合蛋白(#efca44型;@填充:40像素);}

编译为：

.类别1{颜色:#33acfe型;边缘:20像素;衬垫:20像素;}.第2类{颜色:#efca44型;边缘:10像素;衬垫:40像素;}

这个@参数变量

@参数在mixin中有一个特殊的含义，它包含调用mixin时传递的所有参数。如果您不想处理单个参数，这将非常有用：

.box阴影(@x个:0,@年:0,@模糊:1像素,@颜色:#000) {-webkit-box阴影:@参数;-moz-box-阴影:@参数;盒子阴影:@参数;}.大块{.box阴影(2像素,5像素);}

这将导致：

.大块{-webkit-box阴影:2像素 5像素 1像素 #000;-moz-box-阴影:2像素 5像素 1像素 #000;盒子阴影:2像素 5像素 1像素 #000;}

高级参数和@休息变量

你可以使用...如果您想让mixin接受可变数量的参数。在变量名后使用此选项会将这些参数分配给变量。

.混合蛋白(...) {//匹配0-N个参数
.混合蛋白() {//正好匹配0个参数
.混合蛋白(@一个:1) {//匹配0-1个参数
.混合蛋白(@一个:1, ...) {//匹配0-N个参数
.混合蛋白(@一个, ...) {//匹配1-N个参数

此外：

.混合蛋白(@一个,@休息...) {//@rest绑定到@a之后的参数
   //@arguments已绑定到所有参数}

图案匹配

有时，您可能希望根据传递给mixin的参数更改mixin行为。让我们从一些基本的内容开始：

.混合蛋白(@秒,@颜色) { ... }.class类{.混合蛋白(@交换机,#888);}

现在假设我们想要.混合蛋白根据@交换机，我们可以定义.混合蛋白像这样的：

.混合蛋白（深色，@颜色) {颜色:使变暗(@颜色,10%);}.混合蛋白（光线，@颜色) {颜色:减轻(@颜色,10%);}.混合蛋白(@_,@颜色) {显示：块；}

现在，如果我们运行：

@开关：光照；.class类{.混合蛋白(@交换机,#888);}

我们将获得以下CSS：

.class类{颜色:#a2a2a2型;显示：块；}

颜色传递到的位置.混合蛋白被点亮了。如果@交换机是黑暗的,结果是颜色变深了。

以下是发生的情况：

• 第一个mixin定义不匹配，因为它需要黑暗的作为第一个参数。
• 第二个mixin定义匹配，因为它需要光.
• 第三个mixin定义匹配，因为它需要任何值。

只使用了匹配的mixin定义。变量匹配并绑定到任何值。除变量之外的任何变量都只匹配与自身相等的值。

我们还可以在arity上进行匹配，下面是一个示例：

.混合蛋白(@一个) {颜色:@一个;}.混合蛋白(@一个,@b条) {颜色:褪色(@一个,@b条);}

现在如果我们打电话.混合蛋白用一个参数，我们将得到第一个定义的输出，但如果我们称之为二参数，我们将得到第二个定义，即@一个淡出到@b条.

从mixin调用中选择属性和变量

属性/值访问器

已发布版本3.5.0

从Less 3.5开始，您可以使用属性/变量访问器从计算的mixin规则中选择值。这可以让您使用类似于函数的mixin。

例子：

平均值(@x个,@年) {@结果：((@x个+@年) /2);}分区{//调用mixin并查找其“@result”值
  衬垫: .平均的(16像素,50像素)[@结果];}

结果如下：

分区{衬垫:33像素;}

覆盖mixin值

如果有多个匹配的mixin，则会计算并合并所有规则，并返回带有该标识符的最后一个匹配值。这类似于CSS中的级联，它允许您“覆盖”mixin值。

//无图书馆
#图书馆() {.混合蛋白() {支柱：foo；}}//自定义.less
@导入 “库”;#图书馆() {.混合蛋白() {支柱：巴；}}.box文件{my值：#library.mixin[prop]；}

输出：

.box文件{my值：巴；}

未命名查找

如果未在中指定查找值[@查找]而是写[]在mixin或规则集调用后，全部的值将级联，并选择最后声明的值。

含义：上述示例中的平均mixin可以写成：

平均值(@x个,@年) {@结果：((@x个+@年) /2);}分区{//调用mixin并查找其最终值
  衬垫: .平均的(16像素,50像素)[];}

输出相同：

分区{衬垫:33像素;}

对于混合调用的别名规则集或变量，也存在相同的级联行为。

@医生：{价值：foo；}.box文件{my值:@医生[];}

该输出：

.box文件{my值：foo；}

将mixin和变量解锁到调用程序范围

已弃用-使用属性/值访问器

mixin中定义的变量和mixin是可见的，可以在调用方的作用域中使用。只有一个例外：如果调用者包含同名的变量（包括由另一个mixin调用定义的变量），则不会复制变量。只有调用方本地作用域中存在的变量受到保护。从父范围继承的变量将被覆盖。

注意：此行为已被弃用，将来不会以这种方式将变量和mixin合并到调用者范围中。

例子：

.混合蛋白() {@宽度：  100%;@高度： 200像素;}.调用方{.混合蛋白();宽度:@宽度;高度:@高度;}

结果如下：

.调用方{宽度:100%;高度:200像素;}

无法覆盖直接在调用方范围内定义的变量。但是，调用方父范围中定义的变量不受保护，将被覆盖：

.混合蛋白() {@大小：in-mixin；@仅在混合中定义：in-mixin；}.class类{边缘:@尺寸 @仅在混合中定义;.混合蛋白();}@大小：全局定义值；//调用方父作用域-无保护

结果如下：

.class类{边缘：in-mixin-in-mijin；}

最后，mixin中定义的mixin也作为返回值：

.解锁(@价值) {//外混合蛋白
  .do有事() {//嵌套mixin
    宣言:@价值;}}#命名空间{.解锁(5);//解锁doSomething mixin
  .do有事();//嵌套的mixin已复制到此处，并且可用}

结果如下：

#命名空间{宣言:5;}

创建循环

在Less中，mixin可以调用自己。当与保护表达式和模式匹配，可用于创建各种迭代/循环结构。

例子：

.循环(@计数器)什么时候(@计数器>0) {.循环((@计数器-1));//下一次迭代
  宽度: (10像素*@计数器);//每个迭代的代码}分区{.循环(5);//启动循环}

输出：

分区{宽度:10像素;宽度:20像素;宽度:30像素;宽度:40像素;宽度:50像素;}

使用递归循环生成CSS网格类的通用示例：

.生成列(4);.生成列(@n个,@我:1)什么时候(@我=<@n个) {.column-@{i}{宽度: (@我*100%/@n个);}.生成列(@n个, (@我+1));}

输出：

.第1列{宽度:25%;}.第2列{宽度:50%;}.第3列{宽度:75%;}.第4列{宽度:100%;}

当你想比赛时，守卫很有用表达与简单值或arity相对。如果你熟悉函数式编程，你可能已经遇到过了。

为了尽可能接近CSS的声明性质，Less选择通过以下方式实现条件执行防护混合器而不是如果/其他的声明，以@媒体查询功能规范。

让我们从一个例子开始：

.混合蛋白(@一个)什么时候(轻盈(@一个) >=50%) {背景色：黑色；}.混合蛋白(@一个)什么时候(轻盈(@一个) <50%) {背景色：白色；}.混合蛋白(@一个) {颜色:@一个;}

关键是什么时候关键字，它引入了一个保护序列（这里只有一个保护）。现在，如果我们运行以下代码：

.类别1{.混合蛋白(#ddd（ddd）) }.第2类{.混合蛋白(#555) }

我们将得到以下结果：

.类别1{背景色：黑色；颜色:#ddd（ddd）;}.第2类{背景色：白色；颜色:#555;}

保护比较运算符

可用于保护的比较运算符的完整列表如下：>,>=,=,=<,<。此外，关键字真的是唯一真实的值，使这两个mixin等价：

.真相(@一个)什么时候(@一个) { ... }.真相(@一个)什么时候(@一个=真）{…}

关键字以外的任何值真的是伪造的：

.class类{.真相(40);//与上述任何定义都不匹配。}

请注意，您也可以相互比较参数，也可以与非参数进行比较：

@媒体：移动；.混合蛋白(@一个)什么时候(@媒体=移动）{…}.混合蛋白(@一个)什么时候(@媒体=桌面）{…}最大值(@一个;@b条)什么时候(@一个>@b条) {宽度:@一个}最大值(@一个;@b条)什么时候(@一个<@b) {宽度:@b条}

保护逻辑运算符

您可以将逻辑运算符与保护一起使用。语法基于CSS媒体查询。

使用和组合保护的关键字：

.混合蛋白(@一个)什么时候(isnumber号(@一个))和(@一个>0) { ... }

您可以模拟或操作符，用逗号分隔保护,。如果任何一名后卫的评估结果为真，则视为匹配：

.混合蛋白(@一个)什么时候(@一个>10), (@一个< -10) { ... }

使用不否定条件的关键字：

.混合蛋白(@b条)什么时候 不(@b条>0) { ... }

类型检查功能

最后，如果您想根据值类型匹配mixin，可以使用是功能：

.混合蛋白(@一个;@b条:0)什么时候(是数字(@b条)) { ... }.混合蛋白(@一个;@b条：黑色）什么时候(呈黄色(@b条)) { ... }

以下是基本的类型检查功能：

• 呈黄色
• isnumber号
• 发出字符串
• iskeyword
• isurl公司

如果要检查一个值除了是一个数字之外是否以特定单位表示，可以使用以下选项之一：

• ispixel（像素）
• 百分比
• 国际标准化组织
• is单位

已发布版本3.5.0

将mixin调用分配给变量

混合可以分配给变量，作为变量调用调用，也可以用于地图查找。

#主题.深色.navbar（导航栏）{.颜色（轻）{初级的：紫色；}.颜色（深色）{初级的：黑色；第二的：灰色；}}.navbar（导航栏）{@颜色：#主题.dark.navbar。颜色（深色）；背景:@颜色[主要]；边境:1像素固体@颜色【次要】；}

这将输出：

.navbar（导航栏）{背景：黑色；边境:1像素纯灰色；}

变量调用

整个mixin调用可以是别名，并作为变量调用调用。如：

#图书馆() {.颜色() {背景：绿色；}}.box文件{@别名：#库。颜色();@别名();}

输出：

.box文件{背景：绿色；}

注意，与根目录中使用的mixin不同，mixin调用分配给变量和调用时没有参数始终需要括号。以下内容无效。

#图书馆() {.颜色() {背景：绿色；}}.box文件{@别名：#图书馆颜色；@别名();//错误：无法计算变量调用@alias}

这是因为如果为变量分配了选择器列表或mixin调用，则该变量是不明确的。例如，在Less 3.5+中，可以这样使用此变量。

.box文件{@别名：#图书馆颜色；@{别名}{一：b；}}

以上将输出：

.box文件 #图书馆.颜色{一：b；}

将规则集分配给变量

已发布v1.7.0版本

分离规则集是一组css属性、嵌套规则集、媒体声明或存储在变量中的任何其他内容。您可以将其包含到规则集或其他结构中，其所有属性都将复制到那里。您还可以将其用作mixin参数，并将其作为任何其他变量传递。

简单示例：

//声明分离的规则集
@分离的规则集：{背景：红色；}；//在3.5.0中，分号是可选的+

//使用分离的规则集
.顶部{@分离的规则集(); }

编译为：

.顶部{背景：红色；}

分离的规则集调用后的括号是必需的（后面跟查找值). 电话@分离规则集；不会起作用。

当您想要定义一个mixin，它可以抽象出媒体查询中的一段代码或不支持的浏览器类名。可以将规则集传递给mixin，以便mixin可以包装内容，例如。

.desktop和old-ie(@规则) {@媒体屏幕和（最小宽度：1200像素) {@规则(); }html格式.lt-ie9型 &{@规则(); }}收割台{背景色：蓝色；.desktop和old-ie({背景色：红色；});}

这里是台式机和旧iemixin定义了媒体查询和根类，以便您可以使用mixin包装一段代码。这将输出

收割台{背景色：蓝色；}@媒体屏幕和（最小宽度：1200像素) {收割台{背景色：红色；}}html格式.lt-ie9 收割台{背景色：红色；}

规则集现在可以分配给变量或传递给mixin，并且可以包含完整的Less特性集，例如。

@我的规则集：{.my选择器{背景色：黑色；}};

你甚至可以利用媒体查询冒泡例如

@我的规则集：{.my选择器{@媒体电视{背景色：黑色；}}};@媒体（方向：纵向）{@我的规则集();}

将输出

@媒体（方向：纵向）和电视{.my选择器{背景色：黑色；}}

分离的规则集调用以与mixin调用相同的方式将其所有mixin解锁（返回）到调用者不返回变量。

返回的mixin：

//使用mixin分离的规则集
@分离的规则集：{.混合蛋白() {颜色：蓝色；}};//调用分离的规则集
.调用方{@分离的规则集();.混合蛋白();}

结果如下：

.调用方{颜色：蓝色；}

私有变量：

@分离的规则集：{@颜色：蓝色；//这个变量是私有的};.调用方{颜色:@颜色;//语法错误}

范围界定

分离的规则集可以在其所在位置使用所有可访问的变量和混合定义以及它在哪里打电话否则，定义和调用方作用域都可用。如果两个作用域都包含相同的变量或mixin，则声明作用域值优先。

申报范围是定义分离规则集主体的位置。将分离的规则集从一个变量复制到另一个变量无法修改其范围。规则集不能仅通过在那里引用就获得对新作用域的访问权限。

最后，分离的规则集可以通过解锁（导入）来获得对范围的访问。

注意：不推荐通过调用的mixin将变量解锁到范围中。使用属性/变量访问器.

定义和调用方范围可见性

分离的规则集可以看到调用方的变量和混合：

@分离的规则集：{调用者变量:@调用者变量;//此处未定义变量
  调用者-混合();//这里未定义mixin};选择器{//使用分离的规则集
  @分离的规则集();//定义分离规则集中所需的变量和mixin
  @调用者变量：价值；调用者-混合() {变量：声明；}}

编译为：

选择器{调用者变量：值；变量：声明；}

从定义中可以访问的变量和mixin战胜了调用者中可用的变量和Mixin：

@变量：全球的；@分离的规则集：{//将使用全局变量，因为它是可访问的
  //从detached-ruleset定义
  变量:@变量; };选择器{@分离的规则集();@变量：价值；//调用程序中定义的变量-将被忽略}

编译为：

选择器{变量：全局；}

引用不会修改分离的规则集范围

规则集不能仅通过在此处引用就获得对新作用域的访问权限：

@分离-1：{作用域分离:@一个 @两个; };.一个{@一个：可见；二{@分离-2： @分离-1;//复制/重命名规则集
    @两个：可见；//规则集无法看到此变量}}.使用位置{.一个>.2个();@分离-2();}

抛出错误：

错误1:32未声明变量“@one”。

解锁威尔修改分离的规则集范围

分离的规则集通过在范围内解锁（导入）来获得访问权限：

#空间{.导入程序-1() {@分离：{作用域分离:@变量; };//定义分离的规则集}}导入程序-2() {@变量：价值；//未锁定的分离规则集可以看到此变量
  #空间>.导入程序-1();//解锁/导入分离的规则集}.使用地点{导入程序-2();//第二次解锁/导入分离的规则集
   @分离的，分离的();}

编译为：

.使用位置{作用域分离：值；}

属性/变量访问器

（查找值）

已发布版本3.5.0

从Less 3.5开始，您可以使用属性/变量访问器（也称为“查找”）从变量（分离的）规则集中选择值。

@配置：{选项1：true；选项2：假；}.混合蛋白（）何时(@配置[option1]=真）{挑选出来的：值；}.box文件{.混合蛋白();}

输出：

.box文件{挑选出来的：值；}

如果查找返回的是另一个分离的规则集，则可以使用第二次查找来获取该值。

@配置：{@颜色：{初级的：蓝色；}}.box文件{颜色:@配置[@颜色][主要]；}

查找中的变量

返回的查找值本身可以是变量。如中所示，您可以编写：

@配置：{@深色：{初级的：深蓝色；}@灯光: {初级的：浅蓝色；}}.box文件{@查找：黑暗；颜色:@配置[@@查找]【初级】；}

这将输出：

.box文件{颜色：深蓝色；}

已发布版本3.5.0

使用规则集和混合作为值的映射

通过将命名空间与查找相结合[]语法，您可以将规则集/混合项转换为映射。

@尺寸：{可移动的:320像素;平板电脑:768像素;桌面:1024像素;}.导航栏{显示：块；@媒体（最小宽度：@尺寸[平板电脑]）{显示：内联块；}}

输出：

.navbar（导航栏）{显示：块；}@媒体（最小宽度：768像素) {.navbar（导航栏）{显示：内联块；}}

由于名称空间和重载mixin的能力，mixin作为映射更为通用。

#图书馆() {.颜色() {初级的：绿色；第二的：蓝色；}}#图书馆() {.颜色() {初级的：灰色；}}.按钮{颜色：#library.colors[primary]；边界颜色：#library.colors[secondary]；}

输出：

.按钮{颜色：灰色；边界颜色：蓝色；}

您还可以通过以下方式简化此过程混叠混音。即：

.按钮{@颜色：#库。颜色();颜色:@颜色【初级】；边界颜色:@颜色[次要]；}

请注意，如果查找值生成另一个规则集，则可以附加第二个规则集[]查找，如：

@配置：{@选项：{上图书馆：正确}}&何时(@配置[@选项][library-on]=真）{.生产-规则集{支柱：val；}}

通过这种方式，规则集和变量调用可以模拟一种类似于mixin的“名称空间”。

至于是使用分配给变量的mixin还是规则集作为映射，这取决于您。您可能希望通过重新声明分配给规则集的变量来替换整个映射。或者，您可能想要“合并”单独的键/值对，在这种情况下，作为映射的混合可能更合适。

在查找中使用变量

需要注意的一件重要事情是[@查找]是键（变量）名称@查找、和未作为变量进行计算。如果希望密钥名称本身是变量，可以使用@@变量语法。

例如。

.食物() {@甜点：冰淇淋；}@键到查找：甜点；.午餐{对待：.食物[@@键到查找];}

这将输出：

.午餐{对待：冰淇淋；}

Less的一些额外范围界定功能

混音范围功能

直觉上，mixin可以访问定义范围。

#纳秒{@答：一个；.混合蛋白-1() {支柱:@一个;}}.规则{#纳秒.混合蛋白-1();}/*输出：.规则{道具：一个；}*/

弃用的mixin范围功能

这是未来版本中可能删除的mixin范围功能的列表。

#1.（弃用）混音可以访问调用者范围。

#纳秒{.混合蛋白-1() {支柱:@一个;}}.规则{@答：一个；#纳秒.混合蛋白-1();}/*输出：.规则{道具：一个；}*/

这是反直觉的，因为：

1. 这在大多数其他语言中并不常见。
2. 在查看mixin将产生什么输出的定义时，这一点并不明显。

首选方法：传入要对mixin可见的变量。

#纳秒{.混合蛋白-1(@一个) {支柱:@一个;}}.规则{#纳秒.混合蛋白-1(@一个：一）；}

#2.（弃用）调用者范围可以访问mixin中的变量

Mixin会将其变量推送到调用者范围，但只有如果变量不是本地定义的。

#纳秒{.混合蛋白-1() {@答：一个；@b：二；}}.规则{@b：三个；#纳秒.混合蛋白-1();螺旋桨-1:@一个;项目-2:@b条;}/*输出：.规则{prop-1：一个；prop-2：三个；}*/

这是反直觉的，因为：

1. 调用方作用域中较高的变量可以被重写。
2. 这也不是一种典型的语言行为。
3. 它不同于分离规则集的行为。

此外，随着Maps的引入，您可以直接检索变量值（和mixin）。

首选方法:

#纳秒{.混合蛋白-1() {@答：一个；@b：二；}}.规则{@返回：#纳秒。混合蛋白-1();螺旋桨-1:@收益[@一个];项目-2:@收益[@b];}/*输出：.规则{prop-1：一个；prop-2：两个；}*/

#3.（弃用）调用方作用域可以从mixin访问mixin

与弃用的变量行为类似，mixin也被推入调用方范围。然而，与变量不同的是，与合并的作用域mixin同名的mixin被合并。

#纳秒{.混合蛋白-1() {螺旋桨-1：一个；项目-2：两个；}}.规则{#纳秒();.混合蛋白-1();.混合蛋白-1() {螺旋桨-3：三个；}}/*输出：.规则{prop-1：一；prop-2：两个；prop-3:三个；}*/

首选方法：直接调用mixin。

#纳秒{.混合蛋白-1() {螺旋桨-1：一个；项目-2：两个；}}.规则{.混合蛋白-1() {螺旋桨-3：三个；}#纳秒.混合蛋白-1();.混合蛋白-1();}/*输出：.规则{prop-1：一个；prop-2：两个；丙-3：三；}*/

提示和技巧

学分：less/less.js/issues/1472

这里有一个用于定义变量并将其保存在某个私有范围内的技巧，可以防止它们泄漏到全局空间。

&{//变量
  @高度： 100像素;@宽度： 20像素;//不要在此范围上定义任何prop:value（因为这样做会生成（错误）输出）。

  .测试{高度:@高度;宽度:@宽度;}}.休息{高度:@高度;//名称错误：变量@height未定义}

在这里，@高度和@宽度仅为创建的范围定义& { ... }您也可以在规则中嵌套一个作用域：

.some-模块{@高度： 200像素;@宽度： 200像素;水平对齐：左；线路高度:@高度;//200像素

  &{//覆盖原始值
    @高度： 100像素;@宽度：自动；.some-模块_element{高度:@高度;//100像素
      宽度:@宽度;//200像素}.some-模块_element .text格式{线路高度: (@高度/2);//50像素}}&{//覆盖原始值
    @高度： 50像素;.some-模块_另一个元素{高度:@高度;//50像素
      宽度:@宽度;//200像素}.some-模块_其他元素 .text格式{线路高度: (@高度/2);//25像素}}}

“if”在选择器周围

已发布1.5.0版

与Mixin Guards一样，Guards也可以应用于css选择器，这是声明Mixin然后立即调用它的语法糖。

例如，在1.5.0之前，您必须这样做：

.my可选样式()什么时候(@my-option（我的选项）=真）{按钮{颜色：白色；}}.my可选样式();

现在，您可以将保护直接应用于样式。

按钮 什么时候(@my-option（我的选项）=真）{颜色：白色；}

您还可以实现如果通过将其与&功能，允许您将多个防护分组。

& 什么时候(@my-option（我的选项）=真）{按钮{颜色：白色；}一{颜色：蓝色；}}

注意，您还可以通过使用实际的if（）函数和变量调用。如：

@医生： 如果(@my-option（我的选项）=真{按钮{颜色：白色；}一个{颜色：蓝色；}});@医生();

已发布第2.5.0版

导入JavaScript插件以添加Less.js函数和功能

编写第一个插件

使用@插件at-rule类似于使用@进口为您的更少文件夹。

@插件 “我的plugin”;//如果没有扩展名，则自动附加.js

由于Less插件是在Less范围内进行评估的，因此插件定义可以非常简单。

寄存器插件({安装:功能(less、pluginManager、函数){函数.add(“圆周率”,功能(){返回 数学.PI；});}})

或者你可以使用模块.导出（可以在浏览器和Node.js中使用）。

模块.exports={安装:功能(less、pluginManager、函数){函数.add(“圆周率”,功能(){返回 数学.PI；});}};

请注意，其他Node.js CommonJS约定，如要求（）在浏览器中不可用。在编写跨平台插件时，请记住这一点。

你能用插件做什么？很多，但让我们从基础开始。我们将首先关注您可能在安装功能。假设你写了这个：

//我的plugin.js
安装:功能(less、pluginManager、函数){函数.add(“圆周率”,功能(){返回 数学.PI；});}//等

祝贺 你！你已经写了一个Less插件！

如果要在样式表中使用此选项：

@插件 “我的plugin”;.给我看圆周率{价值:圆周率();}

你会得到：

.show-me-pi显示{价值:3.141592653589793;}

然而，如果您想将其与其他值相乘或执行其他Less操作，则需要返回适当的Less节点。否则，样式表中的输出是纯文本（这可能对您的目的很好）。

意思是，这更正确：

函数.add(“圆周率”,功能(){返回 新的树。尺寸(数学π）；});

注：维度是一个带或不带单位的数字，如“10px”，它是更少。尺寸（10，“像素”）。有关单位列表，请参阅减少API.

现在您可以在操作中使用您的函数。

@插件 “我的plugin”;.show-me-pi显示{价值:圆周率() *2;}

您可能已经注意到插件文件有可用的全局变量，即函数注册表(功能对象），以及较少的对象。这些是为了方便。

插件范围

由添加的函数@插件at规则遵循较少的作用域规则。这对于希望在不引入命名冲突的情况下添加功能的Less库作者来说非常有用。

例如，假设您有两个来自两个第三方库的插件，它们都有一个名为“foo”的函数。

//lib1.js文件
// ...函数.add(“foo”,功能(){返回 “foo”;});// ...

//lib2.js文件
// ...函数.add(“foo”,功能(){返回 “酒吧”;});// ...