less：Mixin实现相同样式不同颜色

问题

基于element-ui封装的button组件，希望根据不同的类名，实现相同样式、不同颜色。

解决

将相同的部分包成mixin .isUnderline，通过传参实现不同颜色。

<style lang="less">
@color-default: #333;
@color-primary: #409eff;
@color-success: #67c23a;
@color-info: #909399;
@color-warning: #e6a23c;
@color-danger: #f56c6c;

.isUnderline(@color) {
    padding: 2px 3px;
    color: @color;
    text-decoration: underline;
    text-decoration-color: @color;
    background: transparent;
    border: transparent;
    &:focus, &:hover {
        color: darken(@color, 20%);
        text-decoration-color: darken(@color, 30%);
    }
}
.cc-button.is-underline {
    .isUnderline(@color-default);
}
.cc-button.is-underline.el-button--primary {
    .isUnderline(@color-primary);
}
.cc-button.is-underline.el-button--success {
    .isUnderline(@color-success);
}
.cc-button.is-underline.el-button--info {
    .isUnderline(@color-info);
}
.cc-button.is-underline.el-button--warning {
    .isUnderline(@color-warning);
}
.cc-button.is-underline.el-button--danger {
    .isUnderline(@color-danger);
}
</style>

参考

《less新手入门（二）Mixin混合、带参数的Mixin》