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 및 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

난 당신이 $ 세포 - 같은 몇 가지 일을 할 수있을 것 같아요 header : '.cell-header'; @mixin headermixin ($ cell-color, $ cell-bgcolor) { @extend .ui-grid-column-menu-button; 색상 : $ cell-color; background-color : $ cell-bgcolor; 테두리 : 솔리드 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` 답`에 따라