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