ampersand in LESS

.whatever{
   color: #FF0000;
   &.somethingMore {
      width: 40px;
   }
}

 
 

Alight, this allows for styling somethingMore when it happens to sit side by side with whatever like so:

<div class="whatever somethingMore">meh</div>

 
 

It is for if we have whatever AAAANNNDDD somethingMore together. Get it? This is different than this:

<div class="whatever">
   <div class="somethingMore">meh</div>
</div>

 
 

...allowing for different effects. Also do not confuse this with...

.whatever{
   color: #FF0000;
   >.somethingMore {
      width: 40px;
   }
}

 
 

...allowing...

<div class="whatever">
   <div class="somethingMore">
      <div class="somethingMore">meh</div>
   </div>
</div>

 
 

...only the immediate somethingMore one tier to be styled as forty pixels wide.