less-继承

// extend关键字的使用，
// extend是less的一个伪类，他可以继承所匹配声明中的全部样式
.animation {
    transition: all .3s ease-out;
    .hide{
        transform: scale(0)
    }
}

#main{
    &:extend(.animation);
}

#con{
    &:extend(.animation .hide);
}

// all全局搜索替换 使用选择器匹配到的全部声明
#main {
    width: 200px;
}

#main {
    &:after {
        content:'less is more!'
    }
}
#wrap:extend(#main all) {}

// 减少代码的重复性 从表面看来，extend与方法最大的差别，就是extend是同个选择器共用
// 同一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性
// 方法示例与上面的extend进行对比：

.Method {
    width: 200px;
    &:after {
        content: 'less is more!'
    }
}

#main {
    .Method;
}
#wrap {
    .Method;
}

// 选择器和扩展之间是允许有空格的：pre:hover  :extend(div pre).
// 可以有多个扩展 pre:hover:extend(div pre):extend(.bucket tr) - 注意这与pre:hover:extend(div pre, .bucket tr)一样
// 这是不可以的，扩展必须在最后: pre:hover:extend(div pre).nth-child(odd)
// 如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字