An Introduction to the LESS Dynamic Stylesheet Language

LESS is a JavaScript library that extends cascading stylesheets (CSS), allowing the style language to support variables, nested rules, operations, functions, and mixins.

Alexis Sellier — who also goes by Cloudhead — developed LESS to help himself and other coders write, well, less CSS.

Installing LESS

LESS is very simple to use. Just include the JavaScript file in the head section of an HTML document.

<script src="less-1.3.0.min.js"></script>

The stylesheet that contains the LESS descriptions, should proceed the library. Notice that the extension is “less” and the “rel” attribute value is “stylesheet/less.”

<link rel="stylesheet/less" media="all" href="style.less"/>
<script src="less-1.3.0.min.js"></script>

Using Variables with LESS

Variables, which are common in many languages, are not native to CSS, but LESS adds them. Declaring a LESS variable begins with the “@” symbol followed by the variable name, a colon, the value, and a semicolon.

Here are four examples that name font families, colors, and padding values.

@advert: 'Advent Pro', sans-serif;
@red: #9d0000;
@black: #111;
@pad: 5px 0 10px 50px;

These variables may be applied to any style definition. Notice the padding, background, and font-family declarations in the example.

header { 
	width: 100%;
	height: 35px;
	margin: 0;
	padding: @pad;
	background: @black * 7;
	color: white; 
	font-family: @advert;
	font-weight: normal;
}

LESS allows operations on variables too. Notice that the value of background declaration in the example above is actually the value of the @black variable times 7.

background: @black * 7;

Since the value of the variable @black is #111, when it is multiplied in LESS its value is changed to #777, which is a medium gray. To get a purer, if you will, black, 111 could have been subtracted from @black.

background: @black - 111;

Nested Rules

After variables, LESS’ nested rules are, perhaps, the most significant and useful tool the library provides, allowing rules to be applied to child elements in line with other style declarations.

As a minimal example, consider the case of adding a hover effect to a particular anchor tag.

a { 
	color: white;
	text-decoration: none;
	&:hover { text-decoration: underline; }	
}

Notice how both the standard and hover states are described in the same declaration. Below is how this same style description might look in CSS without LESS.

a {
	color: white;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

When just a single nested declaration is used, the LESS feature may not seem like it is doing much, but as the nested structure becomes more complicated, the benefits start to become obvious. Consider this style declaration for a nav element. Notice that the anchor tags, unordered list, and list items are all nested.

nav{ 
	width: 100%;
	margin: 10px 0 0 0;
	padding: @pad;
	background: @red;
	font-family: @advert; 
	font-size: 20px;
	a { 
		color: white;
		text-decoration: none;
		&:hover { text-decoration: underline; }	
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;	
		li { 
			margin-right: 25px; 
			margin-top: 5px;
			display: inline; 
		}
	}
}

Applying Mixins

Another popular LESS feature is the ability to include mixins. Simply put, a mixin applies the style declarations from one class to another.

.science-fiction { margin: 50px 0 0 50px; }
#books { .science-fiction; }

In this example, both the science-fiction class and the books element would have the same margin value.

Mixins may also include variable values, similar to functions in other languages. In the example, below the science-fiction class would have a margin of 50px all around while the books element would have a margin of 25px all around.

.science-fiction ( @margin: 50px ) { margin: @margin}
#books { .science-fiction( 25px ); }

Summing Up

LESS is a JavaScript library built to extend CSS and allow coders to write effective and more concise style declarations. The library adds many features to CSS, including the support for variables, nested rules, and mixins, as described here.

This is just scratching the surface of what can be done with LESS, but it is a good start.