screenshot

LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted. Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more.

One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.

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 Less.app, CodeKit or some alternative to compile your LESS into plain old vanilla CSS before publishing on the web.

But I Use Sass!

screenshot

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

screenshot

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.

/* Mixin */
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

/* Implementation */
#somediv {
	.border-radius(20px);
} 

 

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

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

 

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.

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	border-radius: @topleft @topright @bottomright @bottomleft;
}

/* Implementation */
#somediv {
	.border-radius-custom(20px, 20px, 0px, 0px);
} 

 

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}

 

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

screenshot

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.

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
	-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

/* Implementation */
#somediv {
	.box-shadow(5px, 5px, 6px, 0.3);
} 

 

/* Compiled CSS */
#somediv {
  -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

 

4. Transition

screenshot

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.

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
}

/* Implementation */
#somediv {
	.transition(all, 0.5s, ease-in);
} 

#somediv:hover {
	opacity: 0;
} 

 

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.

/* Compiled CSS*/
#somediv {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

#somediv:hover {
  opacity: 0;
}

 

5. Transform

screenshot

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!

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

/* Implementation */
#someDiv {
	.transform(5deg, 0.5, 1deg, 0px);
} 

 

/* Compiled CSS*/
#someDiv {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

 

Gradients

screenshot

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.

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop);
	background-image: -moz-linear-gradient(@origin, @start, @stop);
	background-image: -o-linear-gradient(@origin, @start, @stop);
	background-image: -ms-linear-gradient(@origin, @start, @stop);
	background-image: linear-gradient(@origin, @start, @stop);
}

/* Implementation */
#someDiv {
	.gradient(left, #663333, #333333);
} 

 

/* Compiled CSS */
#someDiv {
  background-color: #663333;
  background-image: -webkit-linear-gradient(left, #663333, #333333);
  background-image: -moz-linear-gradient(left, #663333, #333333);
  background-image: -o-linear-gradient(left, #663333, #333333);
  background-image: -ms-linear-gradient(left, #663333, #333333);
  background-image: linear-gradient(left, #663333, #333333);
}

 

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!

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

/* Implementation */
#somediv {
	background-color: BADA55;
	.quick-gradient(top, 0.2);
}

 

/* Compiled CSS */
#somediv {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

 

8. Webkit Reflection

screenshot

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!

/* Mixin */
.reflect (@length: 50%, @opacity: 0.2){
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

/* Implementation */
#somediv {
	.reflect(20%, 0.2);
}

 

/* Compiled CSS */

#somediv {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2)));
}

 

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

screenshot

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.

/* Mixin */
@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);

/* Implementation */
.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

 

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #336666;}
.three {color: #2b5555;}
.four  {color: #994d4d;}
.five  {color: #bb7777;}

 

10. Subtle Color Scheme

screenshot

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.

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

 

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}

 

Conclusion

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!