Source code via Shutterstock

Here’s where I geek out and lavish praise on a great software tool I wish I’d started using a long time ago: LESS « The Dynamic Stylesheet language.

In web development, one of the drawbacks of CSS is that it’s not really a language, but a static list of styles without variables or functions or math operations or any of the other dynamic features that you find in a computer language. I’ve often wished for these features when writing CSS code; for example, setting a variable to a certain color and then using the variable throughout the stylesheet would let you change the color everywhere it appears, simply by changing one variable declaration instead of tedious searching and replacing.

Well, that’s what Less does. It’s a language that extends CSS with a rich set of features, including variables, operations, functions, and “mixins” that allow you to generate entire blocks of code based on simple declarations. You write the code with the extended features of Less, then compile it into the CSS code that will be used on a site.

I can’t recommend it highly enough. I began converting our CSS to Less earlier this week, and it’s already become one of the standard LGF coding modules.

Here’s an example of a “mixin” I’m using to set the gradient fill backgrounds for several different LGF page elements, like the buttons and the top banner. To work in as many browsers as possible, it’s necessary to declare the linear gradient in four different styles, and also include a default background color for browsers that don’t handle gradient fills in CSS. (Variables begin with the ‘@’ symbol.)

.gradientbg (@bg, @start, @finish, @origin: top) {
 	background: @bg;
	background: -webkit-linear-gradient(@origin, @start, @finish);
	background: -moz-linear-gradient(@origin, @start, @finish);
 	background: -ms-linear-gradient(@origin, @start, @finish);
	background: -o-linear-gradient(@origin, @start, @finish);
}

Notice that the mixin declaration can include parameters, and parameters can have default values. This lets us now style an element with a background linear gradient fill with one simple line of code, instead of remembering (or looking up) that mess of different styles. Here’s the style for our top banner to illustrate:

#branding {
	position: relative;
 	border-bottom: 1px solid #B8B8B8;
	margin: 0 0 12px 0;
	width: 100%;
	height: 109px;
	.gradientbg(#E0E0E0, #F0F0F0, #D0D0D0);
}

The mixin is on the last line; it sets the default background solid color to #E0E0E0, and the start and finish colors for the gradient fill to #F0F0F0 and #D0D0D0. Notice that the mixin declaration actually has four parameters; @origin has a default value of “top,” so by leaving it out when we invoke the mixin the default value is used when the CSS code is generated.

When compiled, the above code looks like this:

#branding {
	position: relative;
	border-bottom: 1px solid #B8B8B8;
	margin: 0 0 12px 0;
	width: 100%;
 	height: 109px;
 	background: #E0E0E0;
	background: -webkit-linear-gradient(top, #F0F0F0, #D0D0D0);
	background: -moz-linear-gradient(top, #F0F0F0, #D0D0D0);
	background: -ms-linear-gradient(top, #F0F0F0, #D0D0D0);
	background: -o-linear-gradient(top, #F0F0F0, #D0D0D0);
}

This is just a quick introduction; there’s much more to Less. There’s also a version for PHP, which is actually the one I’m using in our production code: Lessphp - LESS Compiler in PHP.

To make things even nicer, when you compile your CSS code you can tell Less to “minimize” the generated CSS code by removing all unnecessary white space and comments. At LGF, this results in a file that’s about 25% smaller.

I use the Less compiler as part of a Linux shell script that compiles and combines several CSS files into one “master” file, then renames it to our production file to safely update the code … but that’s a topic for another post.

And that, dear readers, ends our geek session for the day.

Related:
Tech Note: Make Web Pages Load Faster by Compressing CSS