Conditional Modifiers

conditional-modifiers.scss

/**
 * Conditional Modifiers
 *
 * For example, here's a basic component with a "spaced" modifier:
 *
 *   <div class="foo foo--spaced">
 *     <p class="foo__child">
 *       Hello
 *     </p>
 *     <p class="foo__child">
 *       I'm Spaced
 *     </p>
 *   </div>
 *
 *   +----------+---------------+
 *   |Hello     |I'm spaced     |
 *   +----------+---------------+
 *
 * When we apply an extra "reversed" modifer, we want to flip the spacing, but
 * we obviously don't want to apply this to all of our "foo" components right?
 *
 * TL;DR: Only if it's spaced *and* reversed:
 *
 *   +----------+---------------+
 *   |     Hello|     I'm spaced|
 *   +----------+---------------+
 */

.foo--spaced {
  > .foo__child {
    padding-left: 20px;

    /* .foo--reverse.foo--spaced > .foo__child  { … } */
    @at-root .foo--reverse#{&} {
      padding-left: 0;
      padding-right: 20px;
    }
  }
}