@p1: .parent1; @p2: .parent2; .parent1{ height: 100px; } @{p2}{ height: 200px; } // 匹配失败 // 形式1，不支持以变量作入参 .son1:extend(@{p1}){} // 形式2，不支持以变量作为选择器的规则集合 .son1:extend(.parent2){} // 匹配成功 .son2:extend(.parent1){} @s3: son3; .@{s3}:extend(.parent1){}
最终输出：
.parent1, .son2, .son3 { height: 100px; } .parent2 { height: 200px; }
6.3. media query影响继承的作用域
6.3.1. media query内的extend操作，仅能继承当前块的其他选择器样式。
注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。
Less源码：
.parent1{ height: 200px; } @media screen{ .parent1{ height: 100px; } // 无法继承子media query块的选择器样式 .son1:extend(.parent2){} @media (min-width: 1023px){ // 继承父media query块的选择器样式 .son2:extend(.parent1){} .parent2{ width: 200px; } } }
最终输出：
.parent1 { height: 200px; } @media screen { .parent1 { height: 100px; } } @media screen and (min-width: 1023px) { .parent2 { width: 200px; } }
6.3.2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式。
Less源码：
@media screen{ .parent{ height: 100px; } @media (min-width: 1023px){ .parent{ width: 200px; } } } .son:extend(.parent){}
最终输出：
@media screen { .parent, .son { height: 100px; } } @media screen and (min-width: 1023px) { .parent, .son { width: 200px; } }
6.4. 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。
7. 混合(Mixin)
Mixin相当于macro，会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点：
7.1. 类选择器、ID选择器自动被定义为mixin，而且具有命名空间；
Less源码：
.animal{ .human{ #fsjohnhuang{ .hair{ color: #000; } } } } .front-end-monkey{ // 或者.animal.human#fsjohnhuang.hair(); // 或者.animal>.human>#fsjohnhuang>.hair; // 或者.animal>.human>#fsjohnhuang>.hair(); // 即可调用mixin .animal.human#fsjohnhuang.hair; }
最终输出：
.animal .human #fsjohnhuang .hair { color: #000; } .front-end-monkey { color: #000; }
7.2. 显示定义不带参数和带参数的样式库(mixin库)，不会输出到最终输出中，仅供调用；
Less源码：
// 定义不带参数的mixin .animal(){ color: #000; } // 定义带参数的mixin // 注意：由于,和;均可用于作为参数分隔符，但由于如background、border等样式属性支持属性值组，而,则作为属性值组元素分隔符，因此推荐使用;作为参数分隔符 .dog(@type; @age){ height: @type * @age * 12px; } // 定义带参数默认值的mixin .cat(@type; @age:1){ height: @type * @age * 5px; } // 调用才会出现在最终输出 .chihuahua{ .dog(1;2); }
最终输出：
.chihuahua { height: 24px; }
7.3. mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
Less源码：
.dog(@type;@age;@rest...){ height: @type * @age * 12px; border: @rest; } .cat(@solid;@w;@color){ border: @arguments; } .chihuahua{ .dog(1;2;solid;1px;red); } .mimi{ .cat(solid;2px;blue); }
最终输出：
.chihuahua { height: 24px; border: solid 1px red; } .mimi { border: solid 2px blue; }
7.4. mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。
Less源码：
.dog(@name){ &::after{ content: @name; } } .dog(@name;@age){ height: @age * 4px; } .dog(@name;@age;@width:20px){ height: @age * 12px; width: @width; } // 仅匹配到 .dog(@name){ .one-dog{ .dog('chihuahua'); } // 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width:20px) .two-three-dog{ .dog('two-three-dog', 2); } // 参数的模式匹配 // 当第一参数值为mimi时调用该mixin .cat(mimi, @age){ height: @age * 22px; } // 当第一参数值为mini时调用该mixin .cat(mini, @age){ height: @age * 12px; } // 不管第一参数值为啥均调用该mixin .cat(@any, @age){ color: #f3c; } .mycat{ .cat(mini, 1); }
最终输出：
.one-dog::after { content: 'chihuahua'; } .two-three-dog { height: 8px; height: 24px; width: 20px; } .mycat { height: 12px; color: #f3c; }
8. 选择、循环作业控制
Less中通过混合（Mixin）后的when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。
Less源码：