Working with LESS CSS

Welcome to the next article from the border of JavaScript and CSS. Today briefly about the tool Less CSS (or CSS/LESS) — JavaScript library, which could help the programmer with CSS.

LESS CSS

This library introduces a kind of dynamic style sheet language. LESS extends CSS by things known from dynamic languages, such as variables, functions, and even the (mixins).

The idea is just to write less code, and use such elements like variables and functions.

Using on client-side

You can make an earlier compilation (what is recommended for a production environment). For test purposes code interpretation in the browser is fine.

Our LESS CSS based code we put into the file with .less extension. Then we include it as normal CSS style sheet, but with the “stylesheet/less” type in rel parameter. The .less files must be included before JS library (less.js).

Example:

&lt;head&gt;
  &lt;link rel=&quot;stylesheet/less&quot; type=&quot;text/css&quot; href=&quot;tests.less&quot;&gt;

  &lt;script src=&quot;less.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

The simplest example of LESS CSS in action, is to define color variable in our .less file, as below:


@my_color: #ed0000;

h2 {
  color: @my_color;
}

.myClass {
  width: 100px;
  color: @my_color;
}

Color defined once as a named variable can then be used repeatedly in the code. A variable is identified by “@” (similar to “$” char for variables in PHP).

Mixins

Mixins are an interesting element of LESS CSS. It is a way to get some kind of inheritance. Thus it’s possible to include properties of one class (of course the CSS class) in another class.

This behavior is similar to the use of variables, but refers to the entire class.

левитра

Additionally, mixins can take arguments, which is similar to functions.

Example — mixins:

/* LESS */
.rounded-corners (@radius: 6px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#elem1 {
  .rounded-corners;
}

#container {
  .rounded-corners(12px);
}

In .rounded-corners we have defined an argument for radius (6px). Value of an argument will be used for variables. In the #container rule, we override this value to 12px.

Nested rules

Yes, rules can be nested, so we get a clearer inheritance, shorter names, no duplication of CSS rules and thus smaller stylesheets — LESS CSS…

Example:

/* LESS */
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &amp;:hover { border-width: 1px }
    }
  }
}

The result of this definition is equivalent to the following CSS code:

/* compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Functions in LESS CSS

Functions / operations feature allow us to add, subtract, divide and multiply property values and colors, giving the ability to create complex relationships between properties.

Example:

/* LESS */

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}

#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

Such a set of functionality provided by the LESS CSS allows you to create more complex creations in the likeness of programs. Of course, always to some extent.

Summary

At the end — some resources for the curious:

– LESS CSS homepage:

http://lesscss.org/

– Emerald — responsive grid system written in LESS:

http://lmc-eu.github.io/emerald/

– LESS CSS — Tips and Tricks:

http://moduscreate.com/less-tips-tricks/

– more examples of the use:

http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/

LESS CSS is not the only preprocessor of this type, however, is gaining popularity. It is certainly worth spending a few moments on his composure.

Thank you.

Posted in Articles, CSS / CSS3, JavaScript, Tools

Tags: CSS, JavaScript

2 Responses to “Working with LESS CSS”

DirectCode says:

Write Your CSS with JavaScript:

http://davidwalsh.name/write-css-javascript
Metro UI CSS styles - JavaScript, HTML5, jQuery plugins, and more - your library of scripts, tutorials and snippets! says:

[…] Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons. Metro UI CSS build with {LESS}. […]

JavaScript & HTML5 Tutorial