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

Question

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 1

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.

Answer 2

...and I have a subclass that I want to reference if it also has another subclass.

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

You only need one & to join the nested selector to the parent class as a sibling. Then write the two subclasses as a regular sibling selector (next to each other without a space in between to indicate they're both required sibling classes).

The SCSS would look like this:

.parent-class {
  //some styles
  &.parent-class-subclass1.parent-class-subclass2 {
    //subclass styles
  }
}

That's equivelant to the following CSS

.parent-class {
  //some styles
}

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  //some other styles
}

To keep your modular naming structure and not have to write out the whole subclass name, you could try using wildcard selectors. I'm not sure it actually ends up looking any better than just writing out the whole class name though.

Here's a codepen that demonstrates:

http://codepen.io/anon/pen/vXKZYA

And the basic code in that pen for posterity:

<div class="parent-class parent-class-subclass1 parent-class-subclass2">
  some text that has all the goods
</div>

.parent-class {
  color: #0000ff;
  &[class*="-subclass1"][class*="-subclass2"] {
    font-size: 20px;
    font-family: sans-serif;
  }
}

Answer 3

you should do it like this

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

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

or you can even do it like this

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