Nested rules greatly enhance the efficiency of composing styles. For example, writing selectors in CSS can be highly repetitive:

.navbar-nav { ... }
.navbar-nav > li { ... }
.navbar-nav > li > a { ... }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { ... }

This same set of selectors and their styles can be written much more easily in LESS, by means of a simple nesting pattern:

.navbar-nav { ...
  > li { ...
    > a { ...
      &:hover,
      &:focus { ... }
    }
  }
}

Once compiled, these rules come out as standard CSS. But, the nesting pattern makes the LESS styles much easier to write and maintain.

Variables make it possible to specify a value once (or revise it), and then use it automatically (or updated) throughout your entire stylesheet. For example, we may use color variables, such as the following:

@off-white:  #e5e5e5;
@brand-primary:  #890000;

When we update the value of these variables, we can automatically update colors throughout the site. This is because we have used the variables throughout our LESS files in rules, such as the following:

a { 
  color: @brand-primary;
}
.navbar { 
  background-color: @brand-primary;
  > li > a {
  color: @off-white;
  }
} 

Mixins make it possible to generate an entire set of rules using concise and easy-to-manage formulations. For example, we can simplify the task of applying the desired border-box properties to elements. In CSS, we would have to add three lines to each element to cover all the browsers and their vendor prefixes, requiring considerable mental load to remember which prefixes are needed:

.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

In LESS, we can write one rule as a mixin, with an @boxmodel parameter for specifying our desired box model:

.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

Then, we can use this mixin wherever needed:

.box {
  .box-sizing(border-box);
}
.another-element {
  .box-sizing(border-box);
}

When compiled, each element will get its essential three lines of CSS.

Operations make it possible to do math, including math with variables. We can start with one color, and then lighten or darken it to get variations as follows:

a:hover { darken(@link-color, 15%); }

We can also calculate padding values to fit our available navbar height. Thus, the following lines from Bootstrap's navbar.less file set the nav item padding values to the amount of vertical space we have left after subtracting the line height. Then, we take that remaining value and divide by two, to share it evenly between the top and bottom padding:

.navbar > li > a {
  padding-top: ((@navbar-height - @line-height-computed) / 2);
  padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}

The LESS compiling process makes it possible to import and combine multiple files into a single, unified CSS file. We can specify the order of import, organizing the resulting stylesheet precisely as needed for our desired cascade.

Thus, Bootstrap's import file, bootstrap.css, begins with imports for essential variables and mixins. Then, it imports a LESS version of normalize.css (in place of a CSS reset), followed by basic styles for print media. Then, it moves to basic global styles (scaffolding.less), typographic fundamentals, and more specific details. Thus, the first several lines of the current bootstrap.less file are given as follows:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";

The resulting CSS file will be a single, unified whole, with styles cascading down from the general to the specific, just as they should.

Because of the ability to import distinct files into a unified whole, we may easily organize our styles in coherent groupings and maintain them in distinct files. This is why Bootstrap comes with so many LESS files—one dedicated to navbar styles, another to buttons, another for alerts, one for carousel styles, and so on—all imported using the bootstrap.less file.

For these reasons and others, LESS and its cousin preprocessors are more than a fad. They have become part of the standard practice for professional web development. Most developers agree that they point to the future of CSS.