SASS BEM расширяется

Question

Я пытаюсь использовать синтаксис bem с sass, но я столкнулся с проблемой.

Вот код:

<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;
        }


      }

     }

Когда моя CSS компилируется, у меня есть это:

.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; }

И я хочу иметь это:

    .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; }

На самом деле, продолжается от моей кнопки блока, когда есть модификатор, я хочу, чтобы все стили, модификатор и элемент. Я не хочу делать это:

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

Answer 1

Чтобы имитировать второй вывод, вам нужно использовать следующую декларацию

.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;
    }
}

Каждый раз, когда вы используете & он захватывает цепочку вложенных фрагментов селектора и создает совершенно новый селектор верхнего уровня с битами, которые он находит. Затем он добавляет все свойства этого селектора sass в селектор css.

Но это не совсем правильное использование BEM, вы дублировали стили без необходимости, и модификаторы должны действительно снижать уровень при сборке с &, Список sass, который вы перечислили, на самом деле правильный, с модулем, за которым следует элемент, за которым следуют любые модификаторы элемента в порядке вложенности, с каждым & ведет себя как следует.

Вы должны использовать родительский класс и класс-модификатор, чтобы собрать все стили (по умолчанию и модифицированные). Как это:

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

Таким образом, созданный вами sass, который более корректен при сборке с БЭМ, будет работать на элементе.

Answer 2

Извините, я не помог. Конечно, вы можете использовать Sass с методологией БЭМ. Я просто хотел указать, что с использованием &__ и &- вы теряете читабельность своего кода.

Я не уверен, насколько сильно вы понимаете БЭМ, но вы должны создать свою разметку и класс следующим образом:

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

а также

.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;
  }

Надеюсь, что это помогло.