SCSS Intermediate Selector "Or"

Question

I couldn't find anything on the docs but I have a selector generally like this:

.a > .b > .c, .a > .d > .c { color: red }

as you can see I'm practically repeating the whole selector. Is there something like:

.a > (.b, .d) > .c { color: red }

Or really anything that prevents my from repeating majority of the selector? Must I use a mixin?

Answer 1

Your proposed pseudo code works. You just need to turn it into SCSS syntax. Like so:

.a{
   > .b, > .d{
     > .c{
        color: red;
     }
   }
}

Make use of SCSS nesting properties ;)

EDIT: In reference to the mixin idea.

You can technically turn anything into a mixin. The question you have to ask yourself is, Is this a common structure I will be using throughout my site? If you are going to repeat this same a-b-c, a-d-c specificity path a lot but you are basically changing he color, then yes, turn into a mixin($color:$argument) and use that $argument to pass the color as needed to the $color variable

@mixin changing-color($color){
   color: $color;
}

.a{
   > .b, > .d{
     > .c{
        @include changing-color(red);
     }
   }
}