Sign in to follow this  
Shurikkan

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

Recommended Posts

Всем привет.

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

<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 by Shurikkan

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites
37 минут назад, AlexZaw сказал:

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


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

 

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

Share this post


Link to post
Share on other sites
1 час назад, Shurikkan сказал:

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

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

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

еще вариант:

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,340
    Total Members
    3,128
    Most Online
    Someone
    Newest Member
    Someone
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.