Получить модификатор ampersand для наследования всех свойств от родительского

Question

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

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: magenta;

    &--selected {
        background: cyan;
    }
}

Я изучаю возможность применения только одного класса к моим элементам (например: <div class="box--selected">...</div> в отличие от <div class="box box--selected">...</div>). Я хотел бы избежать использования @extend Слишком широкая сеть. В настоящее время я использую миксины, которые хороши, но немного многословны для каждого класса с модификатором.

Что я действительно хотел бы сделать, это получить &--selected наследовать все свойства от родительского вложения и только от родительского вложения - т.е. игнорировать любые другие определения классов .box что небрежные разработчики, возможно, вставили.

Answer 1

Я знаю, что вы выразили желание избежать @extend но этот метод может позволить вам избежать определения других разработчиков .box все еще достигая своей цели.

Вы можете использовать заполнители для создания своего собственного родительского вложения и расширить заполнитель ( пример расширения заполнителя), унаследованный только от заполнителя. Как заполнитель, нет никакой вероятности конфликтов с классами других разработчиков на .box:

%box{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: magenta;
}
.box--selected{
    @extend %box;
    background: cyan;
}

По сравнению с миксинами в этом методе отсутствуют параметры, как в следующем примере из статьи, упомянутой выше [ 1 ]:

@mixin padMasterJ ($param: 10px) {
  padding: $param;
}

Стоит отметить, что когда @extend используется для родительского выбора, результат будет включать все вложенные селекторы @extend не может использоваться для непосредственного расширения вложенного селектора.