SCSS优化

下面是我的

scss

代码，它给出了预期的输出。但是我觉得

-nrb

在

\uuu red

和

\uuu 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

您可以分组

红色

和

绿色

：

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

---

我想你可以做这样的事情 $cell header:“.cell header”； @mixin-headermixin（$cell-color，$cell-bgcolor）{ @扩展.ui网格列菜单按钮； 颜色：$细胞颜色； 背景色：$细胞背景色； 边框：纯色1px$单元格颜色

}

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

    }
}

希望这有帮助

---

谢谢

根据答案

-nrb

扩展

.cell-header\uuuu-green

始终..但是我需要

.cell-header\uu-red-nrb

扩展

cell-header\uu-red

，同样的

扩展
cell-header\uu-green-nrb