Less Nesting

Nesting is used to make your code follow some visual hierarchy. It makes your code, simple, clean and less complex. You must be very careful while nesting because overly nested rules may cause complexity and it proves hard to maintain.

Let's take an example. Suppose you have to write a CSS code for a website which has three paragraphs, a standard paragraph, an intro paragraph and a highlighted paragraph. All the paragraphs are different in font size and caps. So you have to define all three differently.

For example:

CSS code:

p {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
}

p .intro {
    font-variant: small-caps;
    font-size: 16px;
    line-height: 24px;
}

p .highlight {
    color: #00214D;
    font-weight: bold;
}

Less nesting facilitates you to write the above CSS code in a nested manner where you don?t need to write the paragraph code repeatedly.

Equivalent Less file:

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// Less for Paragraph
// ------------------
p {
 color: @textColor;
 font-family: @fontFamily;
 font-size: @fontSize;
 line-height: @lineHeight;
 .intro {
  font-variant: @introFontVariant;
  font-size: @introSize;
  line-height: @introLineHeight;
 } 
 .highlight {
  color: @textHighlight;
  font-weight: bold;
 } 
}

Next TopicLess Importing

← prev next →