O'Reilly logo

Less Web Development Essentials by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required