Using LESS

Lately I’ve really been digging into tools like LESS and Sass and trying to figure out how to best leverage them in my workflow. CSS nerds like me simply love this stuff and can’t help but get giddy over how much time and effort can be saved with these utilities.

Today I’ll be focusing on useful LESS snippets that you can copy and paste into your own projects. If you’re a newbie to LESS, be sure to check out these other great articles:

How Should I Use These?

My suggestion for how to use the snippets in this article is to paste the ones you like into a .less file and add your own touches to create a sort of LESS boilerplate that you can use for every project henceforth.

Keep that external file separate from your project-specific .less and import it using the import command: “@import “starter.less”;” This allows you to keep your project code nice and clean while still taking advantage of the powerful mixins housed in your boilerplate.

Finally, use, CodeKit or some alternative to compile your LESS into plain old vanilla CSS before publishing on the web.

But I Use Sass!


If you prefer Sass over LESS, no problem. Both are awesome tools and I might be on the verge of jumping to the Sass side myself. Fortunately, the two syntaxes are very similar so converting from one to other is usually a breeze.

Here’s an excellent comparison of the two languages that will help you convert the following to Sass in a jiffy.

Enough banter, let’s get started on the good stuff!

Rounded Corners


One of the most basic new CSS properties that we all find ourselves using frequently is border radius. Rounded corners make for a simple and easy way to give a design a little bit more personality.

The problem is of course one that we’ll run into with just about every piece of CSS3 we use: those annoying browser prefixes. With LESS we can save ourselves a ton of trouble by leveraging mixins to handle browser prefixes for us.

1. Border Radius Simple

Our first LESS snippet is one of our simplest. Since we’re going for a uniform roundness on every corner, all we need is a single variable that can be changed upon implementation.

The first chunk of code below sets up the mixin, the second is the new and super easy way you can apply rounded corners in your CSS from this day forward! All you have to do is type “.border-radius();” and you’ll get 5px (the default value from the first snippet) rounded corners all the way around your object using the appropriate browser prefixes. If you want to change the value, just enter a new one in between the set of parentheses like I have below.

After your LESS is compiled into CSS, the resulting code should look like this:

2. Border Radius Custom

If you’re a more avid user of the border-radius property, you might wish to have the freedom to set up a custom value for each corner. To do this, we need a more robust mixin.

This time we’re going to need to pass in four variables, one for each corner. Notice that the values start at the top left, then travel around the shape in a clockwise fashion in typical CSS shorthand fashion.

Note that we could in fact only use this second, more complex border-radius LESS snippet (it can accomplish everything the first can) but the simple version is a little briefer and is far more likely to be used so I like to keep it around.

3. Box Shadow


Next up is another frequently used CSS3 property: box-shadow. Implementing this correctly involves four separate values repeated over three different versions that account for the various browsers. Once again, it’s much easier to let LESS do the heavy lifting.

In order of appearance, the four values that we need to set relate to the horizontal shadow offset, vertical shadow offset, blur radius and transparency.

4. Transition


CSS transitions have definitely increased the wow factor for what’s possible with CSS, but they can be a pain to set up, mostly due to the fact that there are five versions that you have to implement for maximum browser support.

This is where we really start seeing the usefulness of using LESS, check out how brief the code is for the implementation. You’ve cut your keystrokes (and thinking) down dramatically and the resulting output has everything you need.

5. Transform


When you’re transforming an object with CSS, you have four values to set: rotate, scale, skew and translate. Carrying these across six different versions makes for a lot of work and some cluttered code. LESS to the rescue!



Gradients are one of the most complex properties in CSS3 and there’s a million different ways you can approach them using LESS. Below you’ll find two possibilities, one that uses two colors, another that can be applied to a div with any background color.

6. Linear Gradient

Here I chose to keep things simple with a basic two color gradient that allows you to choose the direction, start color and stop color. Note that this uses the newer gradient syntax, read about browser support here.

7. Quick Gradient

One of the most annoying things about creating gradients can be figuring out your colors. Sometimes you just want to slap a quick gradient on top of your existing background color and call it a day. This is exactly what this next mixin does.

Basically, this will take a gradient that starts at transparent and fades to black and place it over your background color. All you need to do is set the origin and alpha (which controls the darkness of the gradient) and you’ll get a nice background gradient!

8. Webkit Reflection


Reflections still aren’t a widely supported part of CSS3, so this one is more for fun than anything. I’ve written entire tutorials on the Webkit gradient syntax and I still find it confusing, this little snippet helps immensely.

The only thing you need to do when implementing this is set the length and opacity of the reflection. It’s that easy!

Color Math

One of the really unique things about LESS and Sass is the ability to perform mathematical functions on colors. You can easily start with a single color and then use LESS to automatically create an entire palette. Here are two examples of this in action.

9. Complementary Color Scheme


Here we start with a single base color and then use the color spin method and lighten/darken methods to expand this into five colors that go together well. To generate the complementary colors, we “spin” the color wheel 180 degrees, the others are just slight variations on our starting color.

10. Subtle Color Scheme


Complementary colors are extremely useful, but these days minimal web design is so popular that you might find it more useful to have a color scheme generator that comes up with much more subtle variations of your base.


With that, we’re all finished. The primary purpose of these examples is to jump start your thought process for how to implement LESS in your daily projects. In the mean time, feel free to steal these snippets and use them however you please.

Have you come up with any useful LESS mixins that you use regularly? Share them in the comments below!