首页 > 代码库 > less 之Extend 及 Extend all用法

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用法