University of Missouri

Interface

Skip to search and archives

Write LESS CSS

Published on by Joshua Nichols | Posts by This Author

I recently revisited an old site I had built in order to give it some design tweaks. It was built a few years ago and I was amazed at how simple the CSS was. It was just over 100 lines of code (I liked to put my selector rules all on the same line.) and I could see how everything was styled at a glance.

This is no longer the case today. With CSS3, simple CSS markup is a thing of the past. Now you have to deal with browser prefixes, complex gradient rules and transitions. Things start to get verbose and you end up repeating yourself … a lot.

CSS compilers

CSS by itself is not dynamic. It’s not a programming language, so it doesn’t do any work for you. You have to literally write out every rule … over and over again. Because of this, there isn’t any way to use variables, operations or functions.

This is where a CSS compiler helps out. It lets you write CSS in shorthand and gives you the option to use variables, operations and functions. Then the compiler reads the code and spits out plain CSS that any browser can read. You can compile on your computer, on the server, or even in the user’s browser.

There are several flavors to choose from.

All do very similar things. You just need to pick the one that works for you.

Why I chose LESS CSS

  • It has a syntax very similar to CSS.
  • You can write regular CSS with it, so it’s easy to get started with.
  • You can compile it server-side, browser-side, command line or using a simple GUI app.

The biggest reason I chose LESS CSS is because of the variety of easy to use compiling apps, like Less App, CodeKit, SimpLess, or WinLess. With one, I can compile a static CSS file that I can use on my site and not depend on a server/browser side script. This also allows others on my team to edit the file without a compiler if needed.

Some ways LESS CSS saves me time

Variables

What everyone wished CSS3 had. I can set variables for my colors, fonts, paths and more and then call them anytime.

@tan: 	rgb(199,195,147);
#foo { background-color: @tan; }

Output

#foo { background-color: rgb(199,195,147); }

Color functions

With LESS, I can now take one of my color variables and adjust it. I can darken, lighten, saturate, desaturate make transparent or mix color values. Hex, RGB – it doesn’t matter. If I base it all off of variables, I can change all of a site’s colors easily.

@black: 		#000;
#foo { background-color: lighten(@black, 80%); }

Output

#foo { background-color: #cccccc; }

Nested selectors

Now my CSS can be nested and visually grouped. It can also begin to match my DOM structure. Be careful not to nest too far. Things can get out of hand real fast.

#header {
	width: 100%	
	background-color: @tan;
	h1 {
		color: #fc3;
		&:hover { color: #ccc; }
	}
}

Output

#header {
	width: 100%	
	background-color: rgb(199,195,147);
}
#header h1 { color: #fc3; }
#header h1:hover { color: #ccc; }

Mixins

This is a real time saver. Do you find yourself using the same rules over and over again? Tired of writing browser prefixes every time you use CSS3? Mixins help with this.

  • Clearfix (You don’t need a class in the markup anymore.)
  • Gradients
  • Buttons
  • Browser prefixes
/* A mixin, 5px is defined as default radius */
.border-radius(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
/* Use on a selector */
#header { .border-radius(6px); }

Output

#header {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

Here are a few handy mixins to get you started.

Imports

Just use @import and easily pull in existing code to be compiled into your singe CSS file. This is perfect things like a reset CSS ruleset. Remember the cascade and import in the correct order.

@import 'reset.less';
@import 'ios.less';
@import 'mixers.less';

IE hacks

Just bake them in using this easy method. Keep all your code together. (The IE8 one needs to be escaped when using LESS CSS.)

border: none~'9'; /* IE 8 or lower */
*border: none; /* IE 7 or lower */
_border: none; /* IE 6 or lower */

Include even more comments

LESS CSS will strip out comments in the compiled CSS, so document your code as much as you want! You’ll be glad you did later.

FAQs

“You’re saying I have to learn another language to write CSS?

Yes. You use jQuery, right? How’d that work out for JavaScript?

But the command line is scary. Isn’t there an easier way to compile? or “Do I have to depend on some server-side script?

I’m glad you asked! Give one of these super-easy GUI apps a try: Less AppCodeKitSimpLessWinLessCompass App. They will compile on your desktop giving you a nice, static CSS file to upload.

I’m a designer not a programmer. How am I supposed to deal with this?

If you use LESS and the LESS App, you can write CSS the way you’ve always done it and start adding easy things, like variables, as you learn them. Then get more complex. Soon, you’ll be a LESS CSS master!

I work with a team. How are they supposed to edit my code when I can’t?

They should learn one of these frameworks too! But, if they don’t, just use a compiled CSS file on your site that they can simply edit when you aren’t around.

The compiled CSS is not efficient and results in complex selectors, slower performance and larger files!”

True, but the compiled CSS is for a machine to read and if you minimize the output, file size won’t be an issue. Also, the performance impact of CSS selectors is pretty negligible. I think the time saved during development and maintenance is worth it.

2 Comments

  • Anita Clark Realtor

    I have used Less App on occasion and really like that Alexis (Sellier) did not try to get cute with it…straight forward GUI compiling.

  • Azedine

    Great approach. I’m not very familiar with Less App but WinLess is must-have for webdevelopers who use Windows.
    Thanks for sharing.

Comments are closed.