less 之Extend 及 Extend all用法
Posted BaronYan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less 之Extend 及 Extend all用法相关的知识,希望对你有一定的参考价值。
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; }
明白了吧
以上是关于less 之Extend 及 Extend all用法的主要内容,如果未能解决你的问题,请参考以下文章
jQuery - jQuery的$.extend和$.fn.extend作用及区别
jQuery中 $.extend 和 $.fn.extend 作用及区别