
If you think parts of CSS is repetitive, tedious, and … well, very boring. Have a look here. LESS extends CSS with dynamic behavior such as variables, reusable objects (Mixins/Classes), rules and functions. This minimizes the amount of CSS code, makes code reusable, easier to maintain, sustainable, etc.. This might sound difficult, but actually it’s not that hard. Here is an example of a varible used in LESS:
Varibles
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
The variable @color can here be reused throughout the style sheet and changed one place to make global changes.
Reusable objects / Classes with functions / Mixins
Here an example on using Mixins, as the are called in LESS termonology. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
This enables you to reuses the Mixin .rounded-corners and specify border-radius throughout the stylesheet.
Write some of your own LESS
LESS runs on both the client-side (IE 6+, Webkit, Firefox), and server-side. And has available modules/plugins for both Drupal and WordPress.
Client-side
To use LESS client-side link your .less stylesheets with the rel set to “stylesheet/less”:
Then download less.js and then include it from the top of the page, like so:
Make sure you include your stylesheets before the script.
Drupal usage
Drupal has a LESS CSS Preprocessor module. This module will automatically process any LESS files that are added. The module can be found here:
Drupal LESS CSS Preprocessor
WordPress usage
WordPress also has a plugin for LESS which can be found here:
WP-LESS
Read more
If you want to know more about LESS, visit their HP. Here is it also explained how to install LESS Server-side, more examples, and much other good information.
{less}
Add us to Facebook to get more cool tips & tricks





Posted in
Tags:
«






