/* * 采用&引用完整的父选择器 * 可通过追加和预追加的方式加工&，从而生成新的选择器 * 通过&::after等方式添加伪元素样式规则集合 * 同一个选择器可使用多个& * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面 */ @bg: #aaa; #ps1 .btn{ background-color: @bg; border-radius: 5px; &:hover{ background-color: lighten(@bg, 30%); cursor: pointer; } &-msg, &-eof{ color: blue; } .no-borderradius &{ background-image: url('img/btn-bg.png'); } } /* * &指向组选择器时，会生成新的组选择器 */ #dummy1, .dummy1{ &:hover{ color: red; } & + &{ font-size: 12px; } }
最终输出：
/* * 采用&引用完整的父选择器 * 可通过追加和预追加的方式加工&，从而生成新的选择器 * 通过&::after等方式添加伪元素样式规则集合 * 同一个选择器可使用多个& * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面 */ #ps1 .btn { background-color: #aaaaaa; border-radius: 5px; } #ps1 .btn:hover { background-color: #f6f6f6; cursor: pointer; } #ps1 .btn-msg, #ps1 .btn-eof { color: blue; } .no-borderradius #ps1 .btn { background-image: url('img/btn-bg.png'); } /* * &指向组选择器时，会生成新的组选择器 */ #dummy1:hover, .dummy1:hover { color: red; } #dummy1 + #dummy1, #dummy1 + .dummy1, .dummy1 + #dummy1, .dummy1 + .dummy1 { font-size: 12px; }
5. 导入指令(Import)
less样式文件可通过 @import '文件路径'; 引入外部的less文件。
注意：
不带扩展名或带非.less的扩展名均被视为less文件;
@import可出现在任何位置，而不像css的@import那样只能放在文件第一行。
另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为： @import (reference) '文件路径'; 。下面为各配置项的具体说明：
1. @import (reference) "文件路径";
将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
2. @import (inline) "文件路径";
用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式
3. @import (less) "文件路径";
默认使用该配置项，表示引入的文件为less文件。
4. @import (css) "文件路径";
表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
5. @import (once) "文件路径";
默认使用该配置项，表示对同一个资源仅引入一次。
6. @import (multiple) "文件路径";
表示对同一资源可引入多次。
6. 继承(Extend)
有两种语法形式， <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); }
Less源码：
.animal{ color: #fff; } /* 语法1：<selector>:extend(<parentSelector>){} */ .bear:extend(.animal){ width: 100px; height: 100px; } /* 语法2：<selector>{ &:extend(<parentSelector>); } */ .deer{ &:extend(.animal); width: 50px; height: 50px; }
最终输出：
.animal, .bear, .deer { color: #fff; } /* 语法1：<selector>:extend(<parentSelector>){} */ .bear { width: 100px; height: 100px; } /* 语法2：<selector>{ &:extend(<parentSelector>); } */ .deer { width: 50px; height: 50px; }
注意事项：
6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。
Less源码：
*.parent{ height: 100px; .hair{ color: #f27; } [name=eyes]{ color: #768; } } // 匹配失败 .son:extend(.parent){} .son:extend(.hair){} // 匹配成功 .son:extend(*.parent [name='eyes']){} .son:extend(*.parent [name="eyes"]){} // all关键字会匹配所有包含parentSelector内容的选择器，并以selector替换parentSelector来生成新的选择器 // 下面的内容会生成 *.son，*.son .hair，*.son [name=eyes]三个新的选择器 .son:extend(.parent all){}
最终输出：
*.parent, *.son { height: 100px; } *.parent .hair, *.son .hair { color: #f27; } *.parent [name=eyes], .son, .son, *.son [name=eyes] { color: #768; }
6.2. 父选择器不支持变量形式
Less源码：