Extend 是Less的伪类,他将所放置它的选择器与匹配引用的选择器进行合并。
例如
1 a{ // a 所放置它的选择器 2 background-color: #fff; 3 &:extend(.b); // .b匹配引用的选择器 4 border-bottom: 2px; 5 } 6 .b{ 7 font-weight: 700; 8 color: yellow; 9 }
编译输出:
a { background-color: #fff; border-bottom: 2px; } .b,a { font-weight: 700; color: yellow; }
那 all 怎么用呢?看如下代码:
a{ background-color: #fff; &:extend(.b all); border-bottom: 2px; } .b{ font-weight: 700; color: yellow; } .b:hover{ font-size: 2em; }
编译输出:
a { background-color: #fff; border-bottom: 2px; } .b, a { font-weight: 700; color: yellow; } .b:hover, a:hover { font-size: 2em; }
明白了吧