Qfyilyi

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!

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