SASS BEM extends

Question

I'm trying to use bem syntax with sass, but i encounter a problem.

Here is the code :

<button name="button" class="button button__call--full">Call</button>



    $color__primary : #23ae4b;
    $color__secondary : #1976d3;

    ////////////////////
    // Placeholder   //
    ////////////////////

    %button {
      background: #45beff;
      border: none;
      padding: 5px 8px;
      font-size: 16px;
      border-radius:3px;
      color:#fff;

      &:hover {
        opacity: 0.75;
      }
    }

    ////////////////////
    // Styling        //
    ////////////////////

    .button {
      @extend  %button;

      &__call {

        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;

        &--full{
          background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
        }


      }

     }

When my css is compiled i have this :

.button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

And i want to have this :

    .button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
            box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative;
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

In fact, extends from my block button when there is a modifier, i want all style, modifier and element. I don't want to do this :

<button name="button" class="button  button__call button__call--full">Call</button>

Answer 1

In order to mimic the second output you will need to use the following declaration

.button {
    @extend  %button;

    &__call,
    &__call--full {
        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;
    }

    &__call--full {
        background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
    }
}

Each time you use the & it grabs the chain of nested selector fragments and builds a completely new top level selector with the bits it finds. It then adds whatever properties are in that sass selector into the css selector.

But, this isn't really correct use of BEM, you've duplicated styles unnecessarily and modifiers should really drop a level down when building with the &. The sass you list is actually correct, with the module, followed by the element, followed by any modifiers to the element in the nesting order, with each & behaving as it should.

You should be using the parent class and the modifier class in order to collect all the styles (default and modified). Like this:

<div class='button__call button__call--full'></div>

This way the sass you have built, which is more correct when building with BEM will work on the element