Large Scale Less Part 1 - Compiler Basics

by Matt Perdeck 13. April 2013 13:48

LESS is a superset of CSS that makes building and especially maintaining your stylesheets much easier. This article series shows how to introduce LESS in your project. It discusses choosing a LESS to CSS compiler, using sourcemaps to aid debugging LESS, and options for extending your build process to process LESS files, using either DOS batch commands with post build events or MSBuild definitions.

Contents

Introduction to LESS

Anybody who has worked with CSS on medium to large projects will know how quickly it can devolve in an unmaintainable mess. LESS brings a number of improvements that make maintenance much easier:

  • You can assign values to variables with meaningful names. These can then be referenced in your styles. That not only makes your styles more readable, it also lets you change a value throughout your styles by simply changing the variable definition.
  • You can apply operations on variables. So if element 1 is always twice the width of element 2, you can define just the width of element 2 and multiply by 2 to get the width of element 1. That way, if you ever change the width of element 2, element 1 is automatically adjusted.
  • Using mixins, you can define entire classes in a central spot and then reuse them. To boost reuse, you can pass parameters to mixins. Great if you have two classes that are the same except for say a width or a color.
  • In CSS, specifying inheritance can lead to lots of long selector names. In LESS you can achieve inheritance by nesting child selectors inside parent selectors. Much shorter and clearer.
  • LESS is a superset of CSS. This means that a CSS file is valid LESS. That allows you to slowly convert your CSS files to LESS.
  • LESS is a simple language and easy to learn.

The focus of this article series is on using LESS in your project - choosing and using a LESS compiler, organizing your LESS files in development and production, and extending your MSBuild project to build your LESS files into CSS files.

Once that's organized, actually writing LESS code is easy. Most developers will be productive with LESS within an hour (LESS language documentation).

Choosing a LESS compiler

To compile your LESS files to CSS files, you'll need a LESS compiler. There are many LESS compilers to choose from:

Three of the more popular compilers for the .Net environment are:

Let's look at each in turn.

less.js 1.3.3

  • Written in JavaScript. Can be run on the server using Node, or in the browser itself.
  • Runs from the command line. No GUI.
  • Generates source maps. This allows you to see the LESS source code whilst debugging with Google Chrome Developer Tools, in addition to the generated CSS.
  • Option to switch rewriting of relative URLs on or off.
  • Includes minifier.
  • Optional watch mode, where LESS files get compiled as soon as they are saved.
  • Made by the same people who look after the LESS language definition.

Web Essentials 2.5.1

  • Extension for Visual Studio.
  • Integrated with the Visual Studio GUI. Not a command line tool.
  • The LESS compiler is only a small part of this extensive tool kit for front end developers. Also included are TypeScript and CoffeeScript compilers and lots of CSS related features.
  • Includes minifier.
  • Compile on project build and/or when a LESS file is saved.
  • Live preview window of the generated CSS.

dotless 1.3.1.0

  • .Net port of less.js.
  • Command line tool.
  • Includes minifier.
  • Optional watch mode, where LESS files get compiled as soon as they are saved.
  • Includes a .dll. Makes it easy to define a HttpHandler in your web.config to compile (and optionally minify) LESS files on the fly, and to cache the result.

Which compiler is best for you depends on your project and your team. However, because less.js is the only compiler that generates source maps, the remainder of this article will assume that you'll use that compiler. Also, it will assume that you will be compiling your LESS files as part of the build, rather than on the fly in the browser.

Installing less.js

Installing less.js on your development machines is easy:

  1. Download and install Node
  2. Tell the Node Package Manager to download and install less.js. Run this from the command line:
    npm install -g less

If you use a build server, don't forget to install Node and less.js there as well.

Compiling a single LESS file

To compile a LESS file to its CSS counterpart, run lessc from the command line, with the input LESS file and the output CSS file, like so:

lessc style.less style.css

If you do not specify an output file, the output goes to the standard output.

Working with LESS in Chrome Developer Tools, using source maps

If you include the generated CSS into a page and open that page in Chrome Developer Tools, you'll notice that it shows you the generated CSS, not the source LESS file.

That is as expected, but if you have thousands of lines of generated CSS, it becomes very time consuming to hunt down the LESS definitions on which those CSS lines are based.

Generating source maps

You can solve this by generating source maps. These literally provide a map for the browser from the generated CSS back to the LESS source files.

Note that due to a bug in earlier versions of the lessc compiler, source maps only work in version 1.4.0 or later.

Use the --line-numbers option to get lessc to generate source maps for you:

lessc style.less style.css --line-numbers=mediaquery

This includes the source map information in @media statements, which Google Chrome understands. As you see below, it prefixes each generated CSS statement with the file and line number of the original LESS definition. It mentions -sass-debug-info, because this type of source map was originally introduced for SASS, another styling language that also translates to CSS.

@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Dev\/style\.less}
                             line{font-family:\000032}}
.header h1 {
  font-size: 12pt;
}
@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Dev\/style\.less}
                        line{font-family:\000033}}
.header h2 {
  font-size: 10pt;
}
@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Dev\/style\.less}
                        line{font-family:\000037}}
.footer p {
  font-size: 80%;
}

In addition to mediaquery, what are the other values for --line-numbers? You could use comments, which places the same information in comments. Or all, which inserts both @media statements and comments. Neither of these values probably do much for you.

Using source maps with the browser

Currently (March 2013), SASS source maps are only supported by Google Chrome version 23 or higher. Firefox are working on it.

Source map support in Chrome is still experimental, which means that you need to enable it explicity:

  1. Open Chrome.
  2. Make sure you have version 23 or higher. Click the Customise icon in the top right corner and click About Google Chrome.
  3. Open the (scary looking) page with Chrome's experimental features, by navigating to chrome//:flags:
  4. Find the Developer Tools experiments and enable them. Close the experimental features page.
  5. While still in Chrome, hit F12 to open the developer tools. Click the settings icon in the bottom right corner to open the tools settings window.
  6. Click the Experiments tab under Settings. Select the Support for Sass checkbox. If you can't see that checkbox, make the developer tools window a bit higher.
  7. Close the settings window.

If you now open a page that loads your generated CSS, you'll find that Chrome Developer Tools now lets you click through from an element style to the corresponding LESS source file:

The Sources tab now shows both your LESS files and the generated CSS files.

Keep in mind that the source maps refer to LESS files on your computer. If you move the generated CSS files to some other computer, move the LESS files as well, otherwise the source maps become useless.

Minifying CSS files

In production, you will want your CSS files to be minified. To make that happen, you can use either of these flags:

--compress Generates shorter but still semi readable CSS. Only removes white space. Each style sits on its own line.
--yui-compress Generates the shortest CSS. Removes all possible white space, reduces color codes, etc. The result is a single line of CSS.

For example:

lessc style.less style.css --relative-urls --yui-compress

There is no point to both minify your CSS and generate source maps. The source maps make the resulting CSS much longer, defeating the purpose of minifying the CSS. In any case, when used together with --yui-compress, the --line-numbers option is ignored.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Books

Book: ASP.NET Site Performance Secrets

ASP.NET Site Performance Secrets

By Matt Perdeck

Details and Purchase

About Matt Perdeck

Matt Perdeck PresentingMatt has written extensively on .Net and client side software development.

more >>