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>

It's not clear here why you thought you would get your desired output at all. — cimmanon, Jun 28 '15 at 17:03
i just want that `button__call--full` extends from `button__call` with a new property — Dujard, Jun 28 '15 at 17:27
Your code doesn't show that. You seem to understand how extend works, so it's not clear here what I have to explain. — cimmanon, Jun 28 '15 at 17:35

score 0 · Accepted Answer · answered Jun 30 '15 at 12:00

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

score -1 · Answer 2 · answered Jun 28 '15 at 17:45

-1

I'm sorry I didn't help. Of course you can use Sass with BEM methodology. I just wanted to point that with using &__ and &-- you loosing readability of your code.

I'm not sure how strong is your understanding of BEM but you should create your markup and class like that:

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

and

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

Hopefully that one helped.

answered Jun 28 '15 at 17:45

Paweł Grzybek

1,093
7
14

That's not what the OP is asking for. They are looking for a specific output so that they don't have to add multiple classes to the element. – cimmanon Jun 28 '15 at 18:02
I'm a beginner with BEM. I wanted to use nested sass syntax to construct my blocks. But yes it's not easy to read and use .. it means i will do this : `.button__call { @extends %button; 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{ @extends %button; 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; } ` – Dujard Jun 28 '15 at 18:03

SASS BEM extends

2 Answers2