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

原创于 2019-06-09 16:04:23 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

本文介绍如何使用Less的mixin特性，为基于Element-UI的Button组件定制统一的下划线样式，并根据不同类型按钮实现颜色变化。通过定义颜色变量和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>