SASS - "elements inside" selector

Viewed 234

Consider a few selectors that I specify a color for. I'd like them to have a different color, when they are inside some other element. SCSS:

.a, .b, .c {
  color: white;
}

.black {
  .a, .b, .c {
    color: black;
  }
}

Can it be written shorter (wihout repeating the selectors)? I tried to use the @at-root,

.a, .b, .c {
  color: white;
  @at-root .black #{&} {
      color: black;
  }
}

but the result is not as expected:

.a, .b, .c {
  color: white;
}
.black .a, .b, .c {
  color: black;
}
1 Answers

You could create a mixin for the abccolor then run that through the black class and add your own colour variable in the parameter:

@mixin abccolour($color) {
    .a, .b, .c {
       color: $color;
    }
}

@include abccolour(white);

.black {
    @include abccolour(black);
}

which gives us this:

.a, .b, .c {
    color: white;
}

.black .a, .black .b, .black .c {
    color: black;
}

Then you can reuse that abccolor mixin elsewhere. I tested this mixin using the Online SCSS Compiler.

Related