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.