In recent years, CSS has matured into a very powerful way to style web pages. It's now possible to create a website's look almost entirely in CSS, with minimal use of images.
What is LESS?
LESS is a dynamic stylesheet language that extends the standard CSS syntax. This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it.
The standard LESS compiler is written in JavaScript, so you can just include it in your web pages along with your LESS stylesheet. The compiler then converts your LESS code into CSS on the fly when the browser loads the page.
LESS is easy to understand, install and use. It gives you lots of useful features, including:
Make sure the link to your LESS stylesheet is before the less.js include in your head section.
That's it! When your page loads, the less.js script runs automatically, converting your LESS stylesheet rules into regular CSS rules, which are then processed by the browser.
Any ruleset that uses a class, id or element selector can be "mixed into" any other ruleset. You mix a ruleset into another simply by including the first ruleset's selector within the second ruleset. Here's an example:
You can also add parameters to mixins, making them behave more like functions. Let's modify the above example so that the border radius and colour can be changed dynamically:
You can also specify default values for mixin parameters. For example:
This works fine, but there's a lot of repetition in the selectors (ul#nav, ul#nav li, ul#nav li a, ul#nav li a:hover), and the inheritance isn't all that clear.
By using nesting in LESS, we can rewrite the above CSS like this:
The LESS compiler then converts the nested version to regular CSS code.
Not only is the nested version more concise, but it's easier to see the cascade. For example, it's obvious at a glance that all the rules relate to elements inside the ul#nav unordered list.
By the way, notice the line:
&:hover { color: #000; }
The & (ampersand) tells LESS not to put a space between the selector's parent and the selector in the final CSS. This is handy when working with pseudo-classes such as :hover. If you miss out the ampersand like this:
then LESS will produce the following CSS:
Notice that LESS has put a space between the a and the :hover, which isn't what you want to happen.
Here are the operators and functions you can use in LESS:
Ex:
What is LESS?
LESS is a dynamic stylesheet language that extends the standard CSS syntax. This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it.
The standard LESS compiler is written in JavaScript, so you can just include it in your web pages along with your LESS stylesheet. The compiler then converts your LESS code into CSS on the fly when the browser loads the page.
LESS is easy to understand, install and use. It gives you lots of useful features, including:
- Variables and mixins, which let you create values and rules once, then reuse them throughout your stylesheet
- Nested rules — these can save you a lot of coding, and they make inheritance clearer
- Operators and functions, which let you create CSS properties mathematically
- Namespaces for grouping and encapsulating variables and mixins
- ... and lots more!
Installing LESS in your web page
- Download the less.js JavaScript file from the LESS website.
- Save the file somewhere in your website, such as the document root.
- Write your LESS stylesheet and save it in a file called, for example, style.less in your document root.
- Include less.js and your LESS stylesheet file in the head section of your web pages:
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.0.41.min.js" type="text/javascript"></script>
That's it! When your page loads, the less.js script runs automatically, converting your LESS stylesheet rules into regular CSS rules, which are then processed by the browser.
Reusing values with variables
To create a variable, you use the following syntax: @variable-name: value;
@mainColour: #309296;
body { color: @mainColour; }
blockquote { border: 2px solid @mainColour; }
Reusing rules with mixins
As well as reusing values with variables, you can reuse whole blocks of CSS throughout your stylesheet. These are called mixins.Any ruleset that uses a class, id or element selector can be "mixed into" any other ruleset. You mix a ruleset into another simply by including the first ruleset's selector within the second ruleset. Here's an example:
.roundedBox {
border: 1px solid #309296;
background-color: #eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
blockquote {
font-size: 1.5em;
.roundedBox;
}
.promo {
width: 10em;
.roundedBox;
}
.roundedBox( @borderRadius, @borderColour ) {
border: 2px solid @borderColour;
background-color: #eee;
-moz-border-radius: @borderRadius;
-webkit-border-radius: @borderRadius;
border-radius: @borderRadius;
padding: 10px;
}
blockquote {
font-size: 1.5em;
.roundedBox( 5px, #6c6 );
}
.promo {
width: 10em;
.roundedBox( 10px, #fa6 );
}
.roundedBox( @borderRadius: 5px, @borderColour: #6c6 ) {
/* declarations here */
}
Writing concise CSS with nested rules
ul#nav {
list-style: none;
}
ul#nav li {
display: inline;
margin: 0;
padding: 0;
}
ul#nav li a {
color: #aaa;
font-size: 1em;
}
ul#nav li a:hover {
color: #000;
}
By using nesting in LESS, we can rewrite the above CSS like this:
ul#nav {
list-style: none;
li {
display: inline;
margin: 0;
padding: 0;
a {
color: #aaa;
font-size: 1em;
&:hover { color: #000; }
}
}
}
Not only is the nested version more concise, but it's easier to see the cascade. For example, it's obvious at a glance that all the rules relate to elements inside the ul#nav unordered list.
By the way, notice the line:
&:hover { color: #000; }
The & (ampersand) tells LESS not to put a space between the selector's parent and the selector in the final CSS. This is handy when working with pseudo-classes such as :hover. If you miss out the ampersand like this:
a {
color: #aaa;
font-size: 1em;
:hover { color: #000; }
}
a {
color: #aaa;
font-size: 1em;
}
a :hover { color: #000; }
Performing calculations using operators and functions
A really useful feature of LESS is the ability to use operators and functions to manipulate values. You can manipulate literal numbers, colour values and variables this way.Here are the operators and functions you can use in LESS:
| Operator / Function | Description |
|---|---|
| +, -, *, / | Arithmetic operators |
| lighten(@colour, x%) | Returns the colour value @colour, lightened by x percent |
| darken(@colour, x%) | Returns the colour value @colour, darkened by x percent |
| saturate(@colour, x%) | Returns the colour value @colour, with saturation increased by x percent |
| desaturate(@colour, x%) | Returns the colour value @colour, with saturation decreased by x percent |
| fadein(@colour, x%) | Returns the colour value @colour, made x percent more opaque |
| fadeout(@colour, x%) | Returns the colour value @colour, made x percent more transparent |
| spin(@colour, x) | Returns the colour value @colour, with its hue shifted by x degrees on the colour wheel |
| hue(@colour) | Returns the hue component of the colour value @colour |
| saturation(@colour) | Returns the saturation component of the colour value @colour |
| lightness(@colour) | Returns the lightness component of the colour value @colour |
@h1Size: 5em;
h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * .8; }
h3 { font-size: @h1Size * .6; }
h4 { font-size: @h1Size * .4; }
h5 { font-size: @h1Size * .2; }
@mainColour: #631;
h1 { color: @mainColour; }
h2 { color: lighten(@mainColour, 10%); }
h3 { color: lighten(@mainColour, 20%); }
h4 { color: lighten(@mainColour, 30%); }
h5 { color: lighten(@mainColour, 40%); }
Example 3: Computing container width
@outerWidth: 960px;
@borderWidth: 10px;
@padding: 10px;
#container {
width: @outerWidth - ( @borderWidth + @padding ) * 2;
border: @borderWidth solid #999;
padding: @padding;
}
CSS and LESS comments
You can write comments in two different ways using LESS. Regular CSS comments show up in the CSS output produced by the LESS compiler:/* This comment will appear in the compiled CSS */
// This comment will not appear in the compiled CSS
Importing other LESS and CSS files
If your LESS stylesheet grows very large then you might want to split it into several .less files. You can then import the individual .less files into a main stylesheet using the @import directive:@import "common.less"; @import "forums.less";
If you want to import a regular CSS file without running it through the LESS compiler, just make sure your file has a .css extension:@import "standard.css"; // This file won't be parsed by LESS
