Как подняться на уровень выше в sass?

Question

[Владимир Голубь]

Есть такая структура стилей:

.block {
  &__text {
    ...
  }

  &__title {
    ...
  }
}

Но для блока хочу завести модификатор, который влияет на детей:

.block {

  &--open {
    .block--text {
     ...
    }
  }

  &__text {
    ...
  }

  &__title {
    ...
  }
}

Как подняться на уровень выше &--open и не писать селектор полностью ?

Answer 1

[Эмиль Рахматуллин]

Переменная $this.
Типичная проблема при создании self-controlled компонентов (особенно при использовании методологии BEM) — это создание селекторов внутри модификаторов.

Вместо:

.filter-block {
    &__title {
        color: black;
    }
        
    &--expandable {
        .filter-block__title {
            color: blue;
        }
    }
}

Можно:

.filter-block {
    $this: &;
    &__title {
        color: black;
    }
    &--expandable {
        #{$this}__title {
            color: blue;
        }
    }
}

Comments

[Эмиль Рахматуллин]

Важно держать компонент на верхнем уровне. Если ваш блок вложенный, например .otherblock .myblock, $this из .myblock вернет полное значение, включая родителя, таким образом этот подход не будет работать правильно