[LESS] Разные правила для блоков с разными родителей

[Shurikkan]

Всем привет.

Есть верстка:

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

ВОПРОС:

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

Edited June 3, 2019 by Shurikkan

[AlexZaw]

Насколько я знаю less, самый короткий вариант будет такой:

.sharing-new.position {
  &-left {
    .sharing-new-title {
      color: red;
    }
  }
  &-bottom {
    .sharing-new-title {
      color: green;
    }
  }
}

 

[Shurikkan]

37 минут назад, AlexZaw сказал:

Насколько я знаю less, самый короткий вариант будет такой:

.sharing-new.position {
  &-left {
    .sharing-new-title {
      color: red;
    }
  }
  &-bottom {
    .sharing-new-title {
      color: green;
    }
  }
}

 

Ну это вообще не гибкий вариант получается. Мешать в одном селекторе класс и модификатор - плохой тон 🙂 

[AlexZaw]

1 час назад, Shurikkan сказал:

Мешать в одном селекторе класс и модификатор - плохой тон

Начнем с того что вы изначально смешали блок с модификатором :)

Ну нет возможности выбрать родителя родителя, хоть убейся. Либо так, либо делать дополнительную обертку или переименовывать классы. Выбирайте.

еще вариант:

.sharing-new {
  &.position-left {
  }
  &.position-left &-title {
    color: red;
  }
  &.position-bottom {
  }
  &.position-bottom &-title {
    color: green;
  }
}