Как правильно записать в SCSS стили для такой разметки?

Question

[Big Wheel]

<div class="filling">
    <div class="filling__image">

    </div>
    <div class="filling__text">

    </div>
</div>

<div class="filling filling--one">
    <div class="filling__image">

    </div>
    <div class="filling__text">

    </div>
</div>

<div class="filling filling--two">
    <div class="filling__image">

    </div>
    <div class="filling__text">

    </div>
</div>

.filling {


	&__image {

	}

	&__text {

	}
}

С этими стилями понятно, а как использовать стилизующие классы .filling--one, filling--two?

Answer 1

[KukuRuku]

.filling {

  &#{&}--one {
  }

  &__image {

  }

  &__text {

  }
}

Comments

[Максим Морев]

&#{&}--one
И зачем тут повышение специфичности на ровном месте?

&--one вполне достаточно.

[Big Wheel]

KukuRuku
Максим Морев
Прошу прощения, некорректно вопрос задал, как используя стилизующий класс родителя, поменять стили для .filling__image, .filling__text?

[Максим Морев]

Yriii,

.filling {
  $b: &;

  &__filling-image {
    #{$b}--one & { ... }
    #{$b}--two & { ... }
  }
}

[Big Wheel]

Максим Морев, большое спасибо!!

[Ankhena]

Yriii, или не страдать фигней и использовать кастомные свойства css, переопределяя их в модификаторе.