The & symbol

The & symbol plays a special and important role in Less. It refers to the parent of the current selector and you can use it to reverse the order of nesting and to extend or merge classes. You will see that the following example will tell you more than what can be expressed in a thousand words:

.class1
{
  .class2{
    property: 5;
  }
}
 
.class1
{
  .class2 & {
    property: 5;
  }
}

This code will compile into the following code:

.class1 .class2 {
  property: 5;
}
.class2 .class1 {
  property: 5;
}

You can see that .class2 becomes the parent of .class1 when you use the & symbol after it. The & symbol can also be used in order to reference nesting that is outside the mixin.

The & symbol can also be used to nest and append pseudo classes to a class. Later on, you will see that you can use it to append classes too. A simple example of this will be adding a :hover pseudo class triggered by a mouse hover to a link, as shown in the following code:

.hyperlink{
...