МЕНЬШЕ - использование селектора БЭМ с дополнительным классом для родителя для отклонения - PullRequest
Новая
       6

МЕНЬШЕ - использование селектора БЭМ с дополнительным классом для родителя для отклонения

0 голосов
/ 21 ноября 2018

У меня есть какая-то разметка, которая выглядит примерно так - 

<div class="card">
   <div class="card__icon">Icon</div>
   <div class="card__text">Text</div>
</div>

, которую я стилизую с небольшим МЕНЬШЕ, как так - 

.card {
     &__icon {
        font-size: 1.75em;

         @media (min-width: 992px) {
              font-size: 2em;
          }
      }

       &__text {
          font-size: 1em;
       }
}

Это прекрасно работает, однако родительскийя переключил класс .current на него, и я пытался изменить один из детских стилей, используя те же методы, но, похоже, не смог заставить его работать.Я пытался это - 

.card {
     &__icon {
        font-size: 1.75em;

         @media (min-width: 992px) {
              font-size: 2em;
          }
      }

       &__text {
          font-size: 1em;
       }

      &.current {
          // this is not working
          &__text {
              color: red;
          } 
     }
}

Я могу изменить &__text внутри &.current на .card__text, и он работает нормально - однако мне было интересно, есть ли способ сохранить &__text синтаксис внутри &.current с использованием LESS.Спасибо!

1 Ответ

0 голосов
/ 21 ноября 2018

В соответствии с документацией, родительский селектор & расширяется до всего вложенного родительского правила, принимая каждый родительский вложенный правило как есть и вставляя его вместо `&, поэтому в вашем случае 

.card {
     &.current {
         &__text {
             color: red;
         } 
     }
}

компилируется в 

.card.current__text {
    color: red;
}

, что не то, что мы хотим, потому что класс current__text не существует.Чтобы избежать этого, вы можете переставить селекторы классов в ваших менее правилах следующим образом: 

.card {
     .current & {
         &__text {
             color: red;
         } 
     }
}

, который компилируется в: 

.current .card__text {
    color: red;
}

Рабочий пример можно найти в этом коде

...