CODEWITHSUNDEEP
cssless
ajmajmajma
ajmajmajma

Reputation: 14216

LESS - using BEM selector with extra class on parent to deviate

I have some markup that looks about like this -

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

Which I am styling with a little LESS like so - 

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

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

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

This works great - however the parent is getting toggled a class .current on it and I was trying to change one of the childrens styles using the same methods, but could not seem to get it working. I was trying this - 

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

I can change the &__text inside the &.current to .card__text and it works fine - however I was wondering if there was a way I could keep the &__text syntax inside the &.current with using LESS. Thanks!

Upvotes: 0

Views: 319

Answers (1)

Piotr Wicijowski
Piotr Wicijowski

Reputation: 2115

According to the documentation, the parent selector & expands to the whole parent nested rule, taking each nested rule parent as is and inserting it in place of `&, so in your case

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

compiles to

.card.current__text {
    color: red;
}

which is not what we want, because class current__text does not exist. To avoid that you may rearrange the class selectors in your less rules like so:

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

which compiles to:

.current .card__text {
    color: red;
}

A working example can be found in this codepen

Upvotes: 3

Related Questions