Less-css基础扩展

//扩展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

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接