Mixin: rootModifier - adaptdk/fe_tools GitHub Wiki

rootModifier

A mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.

Params

/**
 * A mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.
 * @param {string} $stringToAppend - The string which will be added to the first selector in the selector.
 */
 
@params (
  $stringToAppend
)

Examples

Example 1

Input (SCSS)

.lol {
  .mort {
    @include rootModifier('de') {
      ...styling
    }
  {
}

Output (CSS)

.lolde .mort {
  ...styling
}

Example 2

Input (SCSS)

.lol {
  & &de {
    &mort {
      @include rootModifier('de') {
        ...styling
      }
    }
  {
}

Output (CSS)

.lol .loldemort {
  ...styling
}

Example 3

Input (SCSS)

.block {
  // The extra "&" is important, because we need the first selector to exist isolated.
  & &__element {
    .block {
      &__element {
        @include rootModifier('--myModifier') {
          ...styling
        }
      }
    }
  }
}

Output (CSS)

.block--myModifier .block__element .block__element { 
  ...styling
}