Web Development

Extend standard CSS with LESS

LESS is a dynamic stylesheet language that extends standard CSS. The result is leaner code that is easier to maintain.

A drawback to using the open source framework Bootstrap for one of my projects is its reliance on the dynamic stylesheet language LESS, so getting familiar with LESS has been a requirement of customizing and extending Bootstrap to fit my needs. I'm sharing what I've learned about LESS and explaining what it brings to the table.

Note: This article originally published in our Software Engineer blog.

LESS is better?

CSS is a powerful language for styling and presenting the web, but it can be somewhat difficult to maintain. For example, imagine a large web application with countless CSS classes and selectors spread across numerous CSS files. It is a daunting task to make CSS changes months after the application goes live. I am not saying LESS will make such changes simple, but it can be used to create leaner code that is easier to maintain.

Extending CSS

LESS extends standard CSS by adding flexibility via programming type options like variables and operations. LESS code is compiled into CSS; it can be compiled using JavaScript in the browser when a page is loaded or using command line tools. Compilation sounds more arduous than it is, but let's take a quick review of LESS basics before examining it. The following list provides the basic or most important LESS features:

  • Functions: This is the same feature available in JavaScript, so these functions can be used to manipulate CSS property values.
  • Mixins: This feature allows you to reuse all properties of a class as the property of another class. The following code shows this feature in action with a class defined for the color attribute and this class used in another element.
.tr-color {
color: #CCC;
}
#body {
.tr-color;
}

The code produces this CSS:

#body {
color: #CCC;
|

  • Nested rules: Long selector names can utilize a tree like or nested structure to simplify usage and readability. For example, rather than defining something like a list item separately from the list, both can be defined within the same structure. Using this approach, the following two snippets provide an example, with the first being the LESS version followed by the actual CSS.

ul {
color: #FFF;
li { color: #CCC; }
}

The code produces this CSS:

ul {
color: FFF;
}
ul li {
color: #CCC;
}

  • Operations: This brings simple math to CSS elements. It allows you to add, subtract, divide, and multiply property values and colors. These operations need to be performed within parenthesis. The power of this feature is it allows you to create relationships between properties.
  • Variables: Basically, you can specify values to be reused throughout a stylesheet. This allows you to more easily make global changes to things like colors used and so forth.
@customColor: #FCFCFC;
ul {
color: @customColor;
}

This code produces standard CSS:

ul {
Color: #FCFCFC;
}

You take advantage of these options by creating LESS files (yes, use the LESS file extension .less) that mix CSS and the LESS features. The LESS files are then compiled into standard CSS.

Rolling it out

Most web designers shake their heads when compile is mentioned as part of LESS, but it can be a simple process. The LESS name applies to the development side of creating your CSS, so it means (or it can mean) less work, but the same amount of CSS is deployed -- that is, the same amount regardless of whether you use LESS or not, since LESS code is compiled into standard CSS. The most efficient approach to compilation is pre-compiling and rolling out CSS, but you can compile on the client-side as well.

Using the client-side approach requires the less.js JavaScript file; there is a download link/button on the LESS main web page. Once the file is downloaded, place it in the proper directory for your application and include a link to it in your web page. However, you need to link to your LESS stylesheets before the link to the less.js file.

Here is how you reference your LESS file:

<link rel=”stylesheet/less” type=”text/css” href=”your_stylesheet.less” />

Once the LESS file is referenced, you should reference the less.js JavaScript file (the path to the source file depends on your installation):

<script src=”less.js” type=”text/javascript”></script>

The other more efficient option is compilation on your development machine and deploying the generated CSS to the web. There are a number of options available for this approach. The LESS site describes a command line option using node.js, though there are options for Windows as well. Here is a quick list of available options.

  • Crunch! (built with Adobe AIR) is an editor and compiler for Windows/Mac.
  • Mixture is a rapid prototyping tool that supports LESS. It is available for Windows/Mac.
  • SimpLESS is a drag and drop compiler for all platforms.
  • Koala is a cross platform GUI tool for compiling multiple file types including LESS.
  • Prepros is a Windows-based tool that can be used to develop LESS and other file types like CoffeeScript.
  • WinLess is a LESS specific tool for Windows.
  • LESS.app is a LESS specific tool for Mac.

So far, I have only used the Crunch! tool, which met my needs. You can experience LESS in real-time via the LESS2CSS site.

LESS is more

I love the idea and possibilities of using LESS. Past experience editing a large collection of CSS files makes features like variables and nested rules exciting. I can imagine making broad CSS changes via these options. This may be a pipe dream, so only time will tell how it runs out with my current project. On the other hand, these options lead to less development, so that immediate benefit is clear.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments