SCSSの最適化

Question

以下は、それが期待される出力を与え、私のscssコードです。しかし、私は__redと__green両方で-nrb繰り返していること、それが汚れに見える感じ、これを簡素化する方法はありますか？

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

また、基礎となるクラスを拡張する正しい方法は何ですか？今、私はthis

Answer 1

のようないくつかのキーワードは、-nrbに@extendでクラス名をハードコーディングされているグループ化できますredと​​：

$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

私はあなたがこの $細胞 - のようないくつかのことを行うことができると思いますheader： '.cell-header'; @mixinのheadermixin（$細胞色、$細胞BGCOLOR）{ @extend .uiグリッド列メニューボタン。 色：$ cell-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; 
    } 

    } 
} 

希望 `セルを拡張し、これは常に` .cell-header__green`を拡張-nrb`答え `ごとに

おかげ