When LESS is Actually More
When LESS is Actually More
LESS is a dynamic stylesheet language that extends CSS with variables, mixins, nested rules, operations and functions.
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:
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:
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:
This example shows how mixins are basically just variables with a bit more flexibility.
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:
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:
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/
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.
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/
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.
All Business Owners Should Read The Lean Startup by Eric Reis
Let me start off by saying that I'm not getting paid for writing this, and I won't receive any affiliate money for linking you to this book. I just want you to read this book now. The Lean Startup by Eric Ries can help any business grow.Continue Reading
Changing the Default Text Selection Colors in Modern Browsers
If you are using a modern browser, you may have noticed when you select text on our website that it has a yellow background instead of the standard blue selection. This is a simple change that you can make to your website today to add a small bit of flair.Continue Reading