How to extend in scss from parent (in case of BEVM)

Question

I try to understand BEVM+SCSS philosophy.

I don't know how to extend V from BE in this case.

What I want to achieve:

.block {
    &__element {
        background-color: black;

        &--variation-a {
          @extend &__element; //won't work
          color: red;
        }

        &--variation-b {
          @extend &__element; //won't work
          color: green;
        }
    }
}

What I want to avoid:

.block {
    &__element {
        background-color: black;

        &--variation-a {
          @extend .block__element; //work but ugly
          color: red;
        }

        &--variation-b {
          @extend .block__element; //work but ugly
          color: green;
        }
    }
}

The only way I've found it's to have a kind of %element { ... } aside and extends from it, but it's not exactly what I want.

3rdthemagical · Accepted Answer · 2016-12-11T11:18:53.453

You can use variables. $b to store block name and $e to store element name.

Sassmeister demo.

.block {
  $b: &;

  &__element {
    $e: #{$b}__element;

    background-color: black;

    &--variation-a {
      @extend #{$e};
      color: red;
    }

    &--variation-b {
      @extend #{$e};
      color: green;
    }
  }
}

But it's bad practice to nest element styles by modifier. Modifier must only override styles.

How to extend in scss from parent (in case of BEVM)

1 Answers1