css - SCSS优化

Question

下面是我的 scss 代码，它给出了预期的输出。但我觉得-nrb在__red和__green中重复看起来很脏，有没有办法简化这个？

$cell-header: '.cell-header';
#{$cell-header} {
    &__red {
        @extend .ui-grid-column-menu-button;
        color: $red-cell-color;
        background-color: $red-cell-bgcolor;
        border: solid 1px $red-cell-color;

        // no right border
        &-nrb{
            @extend .cell-header__red;
            border-right: none;
        }
    }

    &__green {
        @extend .ui-grid-column-menu-button;
        color: $green-cell-color;
        background-color: $green-cell-bgcolor;
        border: solid 1px $green-cell-color;

        // no right border
        &-nrb{
            @extend .cell-header__green;
            border-right: none;
        }
    }
}

此外，扩展底层类的正确方法是什么？现在我已经在-nrb中的@extend中硬编码了类名，一些关键字如this

Answer 1

您可以将红色和绿色分组:

$cell-header: '.cell-header';
#{$cell-header} {
    &__red {
        color: $red-cell-color;
        background-color: $red-cell-bgcolor;
        border: solid 1px $red-cell-color;
    }

    &__green {
        color: $green-cell-color;
        background-color: $green-cell-bgcolor;
        border: solid 1px $green-cell-color;
    }

    &__red, &__green{
        @extend .ui-grid-column-menu-button;

        // no right border
        &-nrb{
            @extend .cell-header__green;
            border-right: none;
        }
    }
}