Alonzo Alonzo - 2 months ago 12
Sass (Sass) Question

How to reference multiple sub-classes on the same element with SASS

I'm using the SMACSS method of writing my SCSS code, and I have a subclass that I want to reference if it also has another subclass.

HTML

<div class="parent-class parent-class-subclass1 parent-class-subclass2">


SCSS

.parent-class {
&-subclass1.&-subclass2 {
//Styles here
}
}


Any idea how I can do this?

Answer

So, when parent element also has subclass1 && subclass2, apply styles?

@katniss.everbean Yes, but the way you wrote it makes you have to duplicate the code.

After searching around for a while I stumbled upon this solution that works perfectly by writing any & references after the first one like #{&}:

SASS

.parent-class {
  &#{&}-subclass1#{&}-subclass2{
        border: 1px solid red;
  }
}

Compiles into (CSS)

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  border: 1px solid red;
}

I found it on the SASS GitHub page.