Picture of Brian Love wearing black against a dark wall in Portland, OR.

Brian Love

LESS tutorial and presentation

I have prepared a tutorial and presentation to give an overview and detailed look at the LESS programming language. This tutorial will cover:

What is LESS

A recent internet survey from June 2012 showed that almost half (46%) of respondents have not even tried a CSS preprocessor. Although not a scientific study, this indicates that there is a large gap between those that have tried to use a CSS preprocessor such as LESS or SASS, and those that are not currently employing a CSS preprocessor. Further, of those that have a preference as to which CSS preprocessor to use, 51% prefer to use LESS and 41% use SASS. I encourage you to try both LESS and SASS, and decide which preprocessor works best for you. Each has their own advantages and disadvantages, which will not be discussed in this article.

So, what exactly is LESS?

Why use LESS?

Why should a web developer or front-end UI engineer use LESS over traditional CSS?

CSS preprocessors such as LESS do not extend the functionality of CSS; only the browser vendors can change the way CSS is implemented. Instead, a CSS preprocessor makes the development flow for a developer much easier. If you are already combining, minimizing and compressing your CSS, then using a CSS preprocessor is a logical next-step.

Installation of LESS

I covered the installation of LESS in my previous article, entitled starting with LESS, so I will not be diving into the details here. For Windows users, I recommend WinLess, which is a simple installation and allows you to easily compile your less files into CSS. For Macintosh users, I recommend you install homebrew, then:

$ brew install git
$ brew install node
$curl https://npmjs.org/install.sh | sh
$ npm install less --global

What can LESS do?

LESS introduces many features that CSS doesn’t provide, such as:

Let’s look at these features in depth.

Variables

color variables

In the example above, we are defining a variable named @webucatorOrange, which contains the specific orange color used on our web site. We can then use this variable anywhere throughout our LESS code. This example also shows the CSS that is output when compiling the LESS to CSS.

string variables

In this example, we are defining a variable named @company, which stores a string. On the second line we are defining a variable@varName, which stores the string “company”. We can evaluate this variable name, and then evaluate the result of that. The CSS that is created is shown on the right.

size variables

In this example, we are defining a variable named @padding, which stores a size of 5 pixels. We can then use this @padding size throughout our LESS code. And, as we will see later, we can use this variable in mathematical operations or functions.

Mixins

mixins

In this example above we are defining a mixin called border-radius, which is used to replicate the cross-browser functionality of the CSS property border-radius. I find it good practice to name the mixins as close as possible to the traditional CSS properties. Mixins can accept parameters, which can also have a default value. Mixins do not need to have parameters. In this example, the mixin has a single parameter named @radius with the default value of 2 pixels. We can then use this parameter in our resulting CSS rules. I am also defining a variable named @gray that stores a color. On the right you can see the CSS that is output when we compile the LESS. Wherever we call the mixin, the resulting CSS is output where we called it; with the appropriate value for the parameter as specified.

Cascading + Nesting

nested styles

In this example, we are using the traditional cascading approach on the left, and the nested approach on the right. As you can see, the nested approach reduces duplication of selectors and closely mimics the structure of the HTML or DOM. It is also much cleaner and easier to read — making our lives easier as we have to maintain the code in the future. We are also using the & combinator for the :focus pseudo selector, which we will discuss in more detail next.

& combinator

In this example we are using the &:focus and &.inline combinators on the img selector. You can see the resulting CSS that is output on the right. The :focus pseudo selector is concatenated with the parent selector, resulting in img:focus. The second combinator shows that we can use this with classes and other selectors besides pseudo classes. Here, I am specifying images that have the class “inline” applied to them, and then setting the display property to inline.

Operations

math operators

This example shows some simple math operations. Here I am just multiplying and adding to an existing variable that is storing a length of 2 pixels. You can do much more than just add and multiply simple pixels. Here are some more examples:

There are also several math functions that LESS provides:

Color functions

Color functions enable you to apply various functions to create new colors or obtain information about existing colors. These include:

color functions

In this example I have a variable named red that contains a specific shade of red for my web site. I can then slightly alter this color using the darken() and lighten() functions. In the first instance I am creating a new color that is 10% darker, and then use this as the color argument to the fadeout() function, so create an image that has 80% transparency. In the second instance I am creating a new color that is 80% lighter than the original @red color.

Comments

Comments are pretty straight-forward in LESS. Multiline comments are preserved and included in the CSS output when you compile the LESS, and single line comments are not preserved. Therefore, you should generally use single line comments, unless you really need the comment to be included in the generated CSS.

@import

The use of @import() in your CSS is without-a-doubt a terrible idea. This causes extra HTTP requests to be made from the client (browser) to your server, for each file you are imported. If you have broken your CSS up into 5 different files, this is 5 requests, rather than a single request. For site performance, you should have a single CSS file that is requested by the client. Also, a general rule of thumb is to not use inline styles. The CSS file that your client requests is cached by the browser, and therefore is not downloaded on each subsequent page visit. The HTML that you return to your user is generally not cached, so all that inline CSS code is shipped to your user’s browser on each and every page load.

What solution does LESS provide?

I recommend you use a single styles.less file that includes all of the necessary CSS files you are using. Here is an example:

// import normalize for CSS resets
@import 'normalize'; // same as @import "normalize.less";

// import mixins for all of my "global" variables and mixins
@import 'mixins';

// base for mobile devices
@import 'base';

//tablets
@media only screen and (min-width: 768px) {
  @import '768';
}

//desktops
@media only screen and (min-width: 1030px) {
  @import '1030';
}

String interpolation

string interpolation

The example shows that we might want to store our site’s base URL as a string variable, along with another variable to hold references to the folder where we store our images. I can then use both of these variables to output the full URL to a background image. The resulting CSS is displayed at the bottom.

Escaping

For example, you might be using IE specific code that is not valid CSS to create a gradient:

filter: ~";
progid: DXImageTransform.Microsoft.gradient(
    startColorstr= '#dfdfdf',
    endColorstr= '#f8f8f8'
  ) ";

We put the invalid CSS in double-quotes, and then prefix it with the ~ symbol. This tells the LESS compiler to ignore the code string, and to just output whatever is in there.

Pre-compile

On the mac, you can compile using the lessc command:

$ lessc style.less > ../css/style.css

Post-compile

<!--LESS stylesheets first-->

<!--Post-compile LESS to CSS3-->
<script type="text/javascript" src="less.js"></script>
<script type="text/javascript">
  // <![CDATA[
  less.watch();
  // ]]>
</script>

LESS Elements

A LESS file that contains some useful mixins that are cross-browser, including:

Minification and compression

For production use, it is best to minimize and compress your CSS code. This makes your code lightweight, and therefore, your web site will be faster. In the end, your users will love you. :-) You can use the -x argument to the LESS compiler to minify your resulting CSS code, and you can use the --yui-compress flag to also have your resulting CSS code compressed using the YUI CSS Compressor.

$ lessc -x styles.less > ../css/styles.css
$ lessc -x --yui-compress styles.less > ../css/styles.css

Alternatives to LESS

I hope to write another article that details some of the differences between LESS and SCSS, as these seem to be the most popular.

Presentation

You can download the complete presentation:

Download

\n\n```\n\n## LESS Elements\n\nA LESS file that contains some useful mixins that are cross-browser, including:\n\n- `.gradient`\n- `.rounded`\n- `.opacity`\n- `.box-shadow`\n- `.inner-shadow`\n\n## Minification and compression\n\nFor production use, it is best to minimize and compress your CSS code.\nThis makes your code lightweight, and therefore, your web site will be faster.\nIn the end, your users will love you. :-)\nYou can use the `-x` argument to the LESS compiler to minify your resulting CSS code, and you can use the `--yui-compress` flag to also have your resulting CSS code compressed using the YUI CSS Compressor.\n\n```bash\n$ lessc -x styles.less > ../css/styles.css\n$ lessc -x --yui-compress styles.less > ../css/styles.css\n```\n\n## Alternatives to LESS\n\n- SASS: Syntactically Awesome StyleSheets\n- Stylus\n\nI hope to write another article that details some of the differences between LESS and SCSS, as these seem to be the most popular.\n\n## Presentation\n\nYou can download the complete presentation:\n\nDownload \n","author":{"@type":"Person","image":"/headshots/brian-love-1.jpg","name":"Brian Love","sameAs":"https://brianflove.com/"},"datePublished":"2012-10-03T00:00:00.000Z","description":"I have prepared a tutorial and presentation to give an overview and detailed look at the LESS programming language.","headline":"LESS tutorial and presentation","name":"LESS tutorial and presentation","url":"https://brianflove.com"}