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

您可以对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;
        }
    }
}

Answer 2

我猜你可以像这样做$cell-header：'.cell-header'；@mixin headermixin ($cell-color，$cell-bgcolor) {@ext.ui-grid-column-menu-button；color：$cell-color；grid color：$cell-bgcolor；border: solid 1px $cell-color；

}

#{$cell-header} {
    &__red {
        @include headermixin($red-cell-color,$red-cell-bgcolor,.cell-header__red)
    &-nrb{
          @extend .cell-header__red;
            border-right: none;
    }


    }

    &__green {
         @include headermixin($green-cell-color,$green-cell-bgcolor,.cell-header__green)
     &-nrb{
         @extend $cell-header__green
            border-right: none;
    }

    }
}

希望这能有所帮助

谢谢