Introduction to LESS: An Easier Way to Create CSS Stylesheets

In web pages, HTML elements are used to represent the content of the page, while CSS styles set the look and feel of those elements. CSS styles work with pairs of property/value that define for example a size, a border or a color. In most cases, CSS stylesheet files are created to define selectors (http://www.w3.org/TR/css3-selectors/) containing the property or group of properties that apply to the HTML elements corresponding to the selectors. It is not recommended to apply styles directly to HTML elements since in that case they cannot be reused.

For a large web application, managing all the CSS stylesheets containing the styles for the application can get messy quickly, since only the group of properties is reusable, not the individual values of the properties.

LESS is a tool that was created to help with code reuse in CSS. LESS is a CSS preprocessor: It adds new syntax on top of the existing CSS syntax. The LESS file is then used to generate valid CSS stylesheets that is used in the web page. I like to summarise it as adding variables to CSS, even if it’s more complex than that.

LESS Features Overview

Here is a quick overview of the most interesting features of LESS:

• Variables: Variables can be declared anywhere in a stylesheet to reuse the value anywhere in the file. Modifying the variable will then update all the places where the variable is used, which is a huge gain over the old save-and-replace. Variables can also be combined and variables containing numerical values like measurements in pixels and colors can be added, subtracted, multiplied and divided together or with constant values. Here is an example of how to use a variable:
  CSS

  @large-border-size: 20px;
  @small-border-size: @large-border-size / 2;
  @small-border: @small-border-size solid black;
  
  #Container
  {
  border: @small-border;
  padding: @small-border-size;
  }

• Mixins: Mixins are a way to reuse a chunk of CSS property/value pairs in any CSS selectors. You can add any number of properties to the mixins and they can take any number of parameters. Often, they are used to group properties with vendor-specific prefixes to avoid repeating them everywhere, making your LESS file easier to read. Here is a mixin for the property user-select that indicate if the content can be selected by the user and all its vendor-specific prefixes:
  CSS

  /*Mixin for user-select property*/
  
  .user-select(@select-type)
  {
  -moz-user-select: @select-type;
  -ms-user-select: @select-type;
   -o-user-select: @select-type;
  -webkit-user-select: @select-type;
          /*Property without prefix is always last to override the other 
            if it is supported by the browser */
  user-select: @select-type;  
  }
  
  /*Using the user-select mixin*/
  #Container
  {
  background-color: black;
  .user-select(none);
  }

• Importing: To reuse selectors, mixins or variables in multiple LESS stylesheets, you can import a LESS file in another LESS file. When a file is imported, variables and mixins of that file will be directly accessible in the stylesheet importing it. This a great feature to build a list of color or mixin that can be easily reused in any stylesheet of the application. On the other hand, I usually avoid importing files containing many selectors that way since all the selectors from the imported files will be added to the stylesheet importing it when the CSS file is generated. This can cause unnecessary duplication of styles if you’re not careful. Also, if the same CSS styles are included in different stylesheets, you will lose the benefit of browser caching to improve the page loading style and reduce the load on your server. In that case, you should simply add the additional CSS files to the web page. To import a file in LESS, simply use the import directive, for example:
  CSS

  @import "colors.less"

• Functions: Many functions are included in LESS to manipulate colors and numbers in your stylesheet. That way, you can avoid hardcoding the result of simple operations on variables of your stylesheet. For example, if you want to use a color somewhere and reuse the same color elsewhere, but it always needs to be 50% lighter, you can use the following style. If you need to adjust the base color later on, the lighter color will be updated automatically.
  CSS

  @standard-background-color: #001ED5;
  
  .StandardBackground
  {
  color: @standard-background-color;
  .user-select(none);
  }
  
  .LightBackground
  {
  background-color: lighten(@standard-background-color, 50%);
  .user-select(none);
  }

Starting to Use LESS

Any valid CSS file is a valid LESS file, so you can start right now with your existing projects in any language. Also, since the output of LESS files is CSS, LESS is already compatible with all browsers. There are many alternatives to integrate LESS to your workflow, here are a few examples:

• Official LESS release: LESS.js is the official version of LESS. You can use it to generate CSS files from your LESS file in the browser, which is good for test but too slow for production websites. A better option is to use to generate your CSS files on your server with Node.js, and serve only those CSS files to the client.
• .LESS (dotless): .LESS is a port of LESS.js which can be used in any ASP.NET project. It will generate the CSS files from the LESS files in your project and serve only the CSS files to the client, and can be integrated with the bundling and minification libraries in System.Optimization. Also Visual Studio 2012 Service Pack 3 supports LESS files: it has syntax highlighting, autocomplete and CSS file preview built in.
• LESS compilers: There are tools in many languages to compile LESS files to CSS files. That way, you can integrate the LESS compilation to your build process, or run the compiler manually to generate the CSS files needed for your project and put those files into production.