Всем привет.
Есть верстка:
<div class="sharing-new position-left">
<div class="sharing-new-title">Заголовок 1</div>
</div>
<div class="sharing-new position-bottom">
<div class="sharing-new-title">Заголовок 2</div>
</div>
Для блока sharing-new-title с модификатором родителя position-left нужно применить один стиль, а для него же, но с модификатором position-bottom - другой.
Пытался сделать по аналогии с вариантом https://jsfiddle.net/3qsfcep7/, но так НЕ работает:
.sharing-new {
&.position-left {
&-title & {
color: red;
}
}
&.position-bottom {
&-title & {
color: red;
}
}
}
ВОПРОС:
Как записать правила максимально коротко, по возможности используя амперсант, чтобы не быть привязанным к названию родительского класса.