css - SCSS优化

下面是我的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;
        }
    }
}

另外，扩展基础类的正确方法是什么？现在，我已经在@extend中的-nrb中对类名进行了硬编码，例如this

最佳答案

您可以将red和green分组：

$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;
        }
    }
}