Less: A look into the CSS Preprocessor
Feb 25, 2013
What is LESS?
LESS is a dynamic style sheet language that allows developers to reuse CSS elements and write LESS code with the same semantics. It has a similar concept as its predecessor SASS, but I think is much simpler.
Compilation
You can do it in two different ways:
1) Precompiling a .less file with a free tool
You will need a compiler to transform your .less file into a .css file.2) Using the JavaScript version (less.js)
The .less file contains the LESS code which is what you will be writing, after compiling you will have a standard CSS that a web browser can read and process.
There are a lot of third party compilers available to complete this process. As a Windows user, I recommend WINLESS; however, if you are a MAC user, you will have to consider another option.
This process is also extremely simple. You just have to download the library from http://lesscss.org to include the script in your markup HTML. The browser will process it as the page loads.
Include the following in the <head> of your markup:
<link rel="stylesheet/less" type="text/css" href="styles.less" />NOTE: Make sure you include your style sheets before the script.
<script src="less.js" type="text/javascript"></script>
LESS Examples
Nesting:
Satandard CSS
#footer {}
#footer #nav {}
#footer #nav ul {}
#footer #nav ul li {}
#footer #nav ul li a {}
LESS Code:
#footer{
#nav {
ul{
li {
a{}
}
}
}
}
Variables:
Standard CSS:
.title, #left_rail, #header, #footer, p, h1{
Color:red;
}
LESS Code:
@default-color: #4455EE;
#header{background-color:@default-color;}
#footer{color: @default-color;}
h1{color: @default-color;}
Reuse of Classes:
Standard CSS:
LESS Code:-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
.rounded-corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#left_rail {
.rounded-corners;
}
Parametric Mix-ins:
Standard CSS:
.rounded_corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
LESS Code:
#header {
.rounded_corners;
#footer {
.rounded_corners(10px);
}
Functions and Operations:
Standard CSS:
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
LESS Code:
@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%);
}
LESS will change the way you write CSS. It saves time and unnecessary work. You can use LESS to create variables, perform operations on variables, nest rules, and build complicated mix-ins to simplify your style sheets.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.