Created

Oct 08, 2013

The Power Of LESS

Posted by Ugo Cei

Are you a Web developer? Haven't you grown weary of using a language like CSS that provides no facilities for code reuse and modularization? If so, keep reading, because we might have just what you need

One of the most recent features introduced in Adobe Experience Manager (CQ) is the Less CSS Compiler. LESS is described on its own web page as:

As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.


Let's have a look at what LESS has to offer.

Variables

These are pretty self-explanatory:

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);

#header { color: @light-blue; }

Outputs:

#header { color: #6c94be; }

Mixins

In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

And we want to use these properties inside other rulesets. Well, we just have to drop in the name of the class in any ruleset we want to include its properties, like so:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

The properties of the .bordered class will now appear in both #menu a and .post a:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Any CSS class or id ruleset can be mixed-in that way.

Parametric Mixins

LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Here’s the canonical example:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

And here’s how we can mix it into various rulesets:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Parametric mixins can also have default values for their parameters:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

We can invoke it like this now:

#header {
  .border-radius;
}

And it will include a 5px border-radius.

Nested rules

LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

In LESS, we can also write it this way:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Or this way:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

The resulting code is more concise, and mimics the structure of your DOM tree.

Notice the & combinator - it’s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like :hover and :focus.

For example:

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

Will output

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

Operations

Any number, color or variable can be operated on. Operations should be performed within parentheses. Here are a couple of examples:

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:

@var: (1px + 5);

LESS will use that unit for the final output—6px in this case.

Functions

LESS provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

There are many more features in LESS and you can find a complete reference on its website.

In the next post, we'll see how to use Less in CQ, specifically for creating readable and reusable stylesheets for components' client libraries.

COMMENTS

ADD A COMMENT