//扩展Extend
less的伪类，合并了选择器，放在与它引用匹配的选择器上 Use Method：以在study上扩展test的样式为例 .test{
color:#000000;
font-size:18px;
} //grammar 1
.study{
&:extend(.test);
background:red;
} //grammar 2
.study:extend(.test){
background:red;
} //输出css
.test,
.study {
color: #000000;
font-size: 18px;
}
.study {
background: red;
} //扩展all
Use Method：以在study上扩展test的样式为例 当有all的时候，会连同test下面所有child一起扩展
.test{
color:#000000;
font-size:18px;
li{
width:50px;
height:50px;
background:red;
}
} //grammar 1
.study:extend(.test all){} //grammar 2
.test{
&:extend(.test all);
} //输出css
.test,
.study {
color: #000000;
font-size: 18px;
}
.test li,
.study li {
width: 50px;
height: 50px;
background: red;
} 当无all时仅会扩展选中的选择器样式
//grammar 1
.study:extend(.test){} //grammar 2
.study{
&:extend(.test);
} //输出css
.test,
.study {
color: #000000;
font-size: 18px;
}
.test li {
width: 50px;
height: 50px;
background: red;
} 总结：
扩展，简而言之就是css中的共用样式
以上例子说明：study上面有着和test中完全相同的样式，为了简化代码，我们在study直接扩展
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/6296162.html
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接