When LESS is Actually More

When LESS is Actually More

We started using LESS on with the redesign of this website. Combined with CodeKit, LESS is one of the most powerful tools I have encountered in my time as a developer. Together, these two will quicken your workflow and alleviate a lot of your headaches.


LESS

LESS is a dynamic stylesheet language that extends CSS with variables, mixins, nested rules, operations and functions.

Variables

So you’ve just sent off the first draft of a website you’ve developed, and the client loves it, except for one change, “We love everything, but we’re thinking that the green on the headers, navigation, and footer text should be a bit more….lime green.” Every time that client makes a color change, you’re going to have to find and replace every instance of that color.

What if, instead, you could just change one instance of that color and have it propagate through the rest of your CSS? This is the first big instance of how LESS can quicken your workflow.

Look at this example for an idea of how variables work in LESS:

http://codepen.io/iamtec/pen/qlfxL

As you can see, you can set one variable at the top of your document and change the colors throughout the entire site. This is only one example of the flexibility that variables allow you in coding. Some other quick uses can be seen in this example:

http://codepen.io/iamtec/pen/jrnzC


Mixins

So you’ve got hold of how powerful variables are in LESS - one change to make multiple changes throughout your site. Now let’s compound on that idea with Mixins. Mixins allow you to use whole classes as variables.

Let’s say you’re starting to develop another website for a new client. The header, footer and main div are all going to have the same margin, padding, width, and background color. Instead of setting these one by one, why not set them all at the same time, as in this example:

http://codepen.io/iamtec/pen/gcGBw

This example shows how mixins are basically just variables with a bit more flexibility.

Nested Rules

Nested rules are extremely easy to use and add a nice structure to your CSS. Instead of using a long string of selectors to target a specific div or anchor tag, you can start nesting your tags inside of each other, and LESS will compile them out to clean, structured CSS. If you look at the example below, you can see a simple implementation of nested rules in LESS:

http://codepen.io/iamtec/pen/aiegJ


Functions and Operations

Does that client from earlier want the green to be about 10% darker? Easy with LESS. What if they want larger borders on everything? No sweat. Another client asks to have the footer a bit darker than the header? On it.

Functions and Operation allow you to do all of these things and more. You can see a simple example of some operations in the example below:

http://codepen.io/iamtec/pen/Frpsh

The best thing you can do with any of these examples is to play around, and read more about LESS through the documentation on their website: http://lesscss.org/


CodeKit

Now that you’ve got all fun LESS code written, how do you implement it? There are many various ways to do this, including but not limited to: server side compiling, javascript compiling, Coda 2 can compile LESS, etc.

The way that suits my workflow the best is an awesome preprocessing program called CodeKit. Developed by Bryan Jones, CodeKit is one of the few programs that is always a part of my workflow for local web development.

The usage is dead simple to compile LESS: drag your project folder into CodeKit, make changes to your LESS file, and press save. That’s it, CodeKit does the rest for you. After compiling you can link your brand spanking new CSS file that’s been created.

CodeKit also processes Sass, Stylus, Jade, Haml, CoffeeScript, and Compass files, if those are your sort of thing. Oh, and it can minify your files; and optimize images; and it can inject your test site with the new code, so you don’t have to refresh your pages; and it includes JSHint and JSLint for debugging your javascript code.

This sounds like a bad sales pitch, but the list of programs that I stand behind this strongly is a slim one. CodeKit really just makes things easier.

You can pick up a free trial of CodeKit here: http://incident57.com/codekit/

Conclusion

You can start using LESS today by playing around with those examples. If you dig it (and you probably will), start trying to write your own code with it. I seriously recommend grabbing that free trial of CodeKit, it makes learning a bit easier. . The easiest way to jump into LESS is to start your style.less file with those color variables from the first example.

If you have any questions about LESS, CodeKit or anything else, message me on Twitter - @iamtec - I’ll be glad to help.