csssasssmacss

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?


Solution

  • 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.