LESS will make your CSS coding incredibly easy to maintain and iterate on in the future. If you’re still building websites without it, you’re an idiot.
What is LESS?
LESS is a language that enhances CSS to make it more modular by following D.R.Y. development practices. With it you can use functions, variables, operations, nested rules and other standard programming methodologies in your CSS files. It’s dead simple to use, and improves your productivity 10 fold (at least).
Getting Started
To start writing LESS today you’ll need to choose a compiler. Options to choose from include client-side (JavaScript), server-side (PHP, Ruby or .NET) or done on your computer using an OS X app.
If you’re using a Mac I highly suggest using the LESS App to compile your files. This app will automatically compile your LESS files into CSS files each time that you save. It will even minify your CSS output.
Using the App I was able to compile a well-commented and organized 1600 line LESS file into a 273 line minified CSS file.
Nested Selectors
With normal CSS it’s not uncommon to come across something like this in your code:
#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}
#header #nav ul li a:hover {}
#header #nav ul li a:active {}
With LESS you can condense this into:
#header {
#nav {
ul {
li {
a {
&:hover {}
&:active {}
}
}
}
}
}
Re-usable Classes
With normal CSS it’s not uncommon to repeat the same commands ten times over in your stylesheet. LESS allows you to re-use a class as a function, passing parameters to customize each reference of the class.
.rounded-corners(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#login-box {
.rounded-corners(3px);
}
.callout {
.rounded-corners(8px);
}
Measurement Relationships
With normal CSS there tends to be frequent use of math to find the correct pixel values for dimensions. With LESS, you can include the math itself in your code to make things more flexible for the future.
/* Golden Mean 960 Grid */
@wrapper_width: 960px;
@gutter_size: 20px;
#wrapper {
width:@wrapper_width;
}
#content {
width:(@wrapper_width - @gutter_size) * 0.625; /* 587.5px */
}
#callouts {
width:(@wrapper_width - @gutter_size) * 0.375; /* 352.5px */
}
If you want to change these dimensions to something else in the future, perhaps to create a mobile or device specific version of your site, all you need to do is change the @wrapper_width variable.
Dynamic Colors
Do you often use various shades of the same color throughout your CSS? If you’ve ever themed or skinned an application or website with CSS you know how long it can take to re-theme all of the subtle variations in color. With LESS you can combine mathematical equations with HEX values to create new colors.
Here is a snippet from a suckerfish dropdown menu I created for a WordPress-driven CMS:
ul.sf-menu {
margin-left:10px;
ul {
margin-top:3px;
}
li {
background:none;
}
li:hover ul,
li.sfHover ul {
top:35px; /* match top ul list item height */
}
li a {
padding:1px 10px;
color:@accent_color_2 * 2.5;
line-height:35px;
}
ul li {
border-bottom:1px solid @accent_color_2 * 1.85;
}
ul li:last-child {
border-bottom:none;
}
ul li a {
background:@accent_color_2 * 2;
line-height:normal;
font-size:@base_font_size;
padding:5px 10px;
color:@accent_color_2 * 0.8;
&:hover {
color:#fff;
background:@accent_color_2;
}
}
li li {
background:@pastel_1;
}
.current_page_ancestor ul.children,
.current_page_item ul.children,
.current_page_parent ul.children {
position:absolute;
top:-2000em;
}
}
@accent_color_2 * 2 will take the HEX value I’ve defined for @accent_color_2 and multiple it by 2, creating a brighter version of the color. Similarly, @accent_color_2 * 0.8 will create a darker version of the same accent color.
In the future if you decide to change a color, this will help save hours of CSS/photoshop work.