SCSS optimization - css

Question

Below is my scss code, it gives expected output. But I feel it looks dirty that the -nrb repeats in both __red and __green, is there a way to simplify this?
$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;
}
}
}
Also, what is the correct way of extending the underlying class? Right now I have hard-coded the class name in #extend in -nrb, some keywords like this

Answer 1

You can group red and 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

I guess you could do some thing like this
$cell-header: '.cell-header';
#mixin headermixin ($cell-color, $cell-bgcolor) {
#extend .ui-grid-column-menu-button;
color: $cell-color;
background-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;
}
}
}
Hope this helps
Thanks