10 LESS CSS Examples You Should Steal for Your Projects

by on 5th December 2011 with 32 Comments

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!

Comments & Discussion

32 Comments

  • http://anthonyvscode.com Anthony

    Nice article! I compiled a list of a few handy ones a while back here: http://anthonyvscode.com/2010/11/15/simplify-css3-with-less-cssmix-ins/

    so much easier to update your code in one place then to copy + paste the attributes every single place you need them.

  • Andrew

    You could do away with border-radius-custom, because .border-radius(3px 4px 5px 6px); will still work :)

  • Thomas

    Nice tipps!
    For border-radius and box-shadow: All current Browser Versions support the unprefixed versions of these properties, so a simple border-radius or box-shadow without the verdor-prefixed versions is usually enough

  • http://www.paulund.co.uk Paul

    Great article seems like I need to give LESS a try.

  • http://www.raimond.lv Raymond

    Less 4-ever!

  • http://webmage.hu/ WebMage

    Thanks, I add a few things to my “LESS library”.

  • http://aripalo.fi Ari

    http://markdotto.com/bootstrap/ … should have mentioned this since it covers most of those and more. Been around some time and is the best known Less “mixin collection”

    Anyway, good thing Less gets “airtime” + your attitude “Less/Sass-whatevs” is good. Too many SASS/SCSS devs out there just hating Less for no apparent reason.

  • http://www.ethangardner.com/ Ethan Gardner

    I have a CSS/Sass helper file that contains a lot of these examples. It’s evolved over the years as I’ve used it for my projects and I put it up on github a few months ago: https://github.com/edgincvg/Momentum-CSS

  • http://net.tutsplus.com Jeffrey Way

    For most of these, like .box-shadow and .border-radius, I think it’s smarter to use Prefix-free or Prefixr. No need to store your own mixins file for this sort of stuff.

  • http://anotheruiguy.com Dale Sande

    LESS is less then SASS. Without extends, you can do nothing more with LESS then let the machine copy and paste the code for you.

    I am no stranger to LESS. I set out to create a complete framework in LESS (http://axle.dalesande.com) and coming off of that, I wrote this …

    http://www.anotheruiguy.com/2011/10/from-sass-to-less-and-right-back-with-sass/

    LESS is the wrong horse to bet on. Sorry.

  • Joshua Johnson

    Why not? I actually wrote these to save myself all the frequent trips to Prefixr (though you did a great job with it Jeff!). The end result is the same old CSS, it’s just a different way to get there.

  • http://net.tutsplus.com Jeffrey Way

    Not pimping Prefixr here (though there are Prefixr plugins so that you don’t ever have to visit that site.) Why not use something like Prefix-Free during development. That way, you can use the official syntax for all styling. Then, for development you can run it through Prefixr (if you’d prefer a non-JS solution to prefixes). That seems more mangeable to me.

  • http://thejase.com Jason Featheringham

    Does Prefixr offer advanced color management like LESS or SASS? I use that extensively to guarantee harmony.

  • http://urvishah.blogspot.com Urvi

    I am reading all your LESS related articles. Its going to be first time i will use LESS in my project as this very useful article made me a less css fan :)

  • http://grawl.ru Grawl

    Good article.
    I use Less Elements http://lesselements.com/

  • http://dutchcelt.nl/ Egor Kloos

    Very nice tips! I’ve been using FE-Patterns to do something similar. Also, not to lose them ;) https://github.com/dutchcelt/FE-Patterns

  • http://blog.3rd-Eden.com 3rdEden

    @JeffreyWay If you want to have prefix free development and still the power of a CSS processor I would suggest checking out Stylus: http://vimeo.com/33462524

  • http://olivercaldwell.co.uk/ Oliver Caldwell

    I personally prefer to have one larger argument rather than separate ones. It just makes your mixins a bit more flexable.

    Like this: https://github.com/Wolfy87/more/blob/master/src/vendors.less

  • http://berkayunal.com Berkay UNAL

    Bootstrap has many of these in common. Check the mixins.less for more details

  • http://immysl.com Immysl

    Just a suggestion. Why use so many parameters for CSS3 properties such as box-shadow, transition and radius, while you can just use one parameter. For example:

    .box-shadow(@shad)
    {
    -moz-box-shadow: @shad;
    -webkit-box-shadow: @shad;
    box-shadow: @shad;
    }

    This way you can even specify ‘none’, in case you wanna get rid of a box-shadow. Also, you don’t need to have a separate mixin, if you need to use the optional spread-radius.

    Just my two cents worth.

  • http://www.hallodom.co.uk hallodom

    Totally agree on the .box-shadow(@shad) suggestion.

  • http://www.kendallsdesign.com Kendal

    Really awesome stuff! I had some of these mixins saved already but was so impressed by the color wheel mixins. So amazing!!

  • Seann

    Thanks for the writeup, great tips.

  • Ian

    Great article! You could have incorporated variables in some of them (e.g. @val: @x @y @blur rgba(0, 0, 0, @alpha) – within the style block – or even @arguments).

  • http://twitter.com/hamzai Hamza Iqbal

    I use the clearfix class as a mixin :

    .clearfix
    {
    zoom: 1;

    &:before,
    &:after
    {
    content: “020″;
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    }

    &:after { clear: both; }
    }

    No more “clearfix” class needed, just apply it like that :

    div
    {
    .clearfix;
    }

  • http://ggnews.ru Andrey

    Hi!
    How used gradient for IE?
    How to registred filter?

  • http://www.serkanazeri.com Serkan Azeri

    Less kullanmak istiyordum, buradaki örnekler çok işime yarayacak teşekkürler.

  • Sathesh

    Will lesscss work on ie7 / ie8?

  • http://mannashake.wordpress.com/ Manna Shake

    very useful work

  • http://romul.net roma

    Very interesting tool. I’m going to try using this in a real project.

  • http://movableapp.com Marco Pegoraro

    Hi, found LessMixin in GitHub:
    http://bit.ly/PLKYJS

    nice and usefull!

  • ds

    For transitions, this may be easier/more flexible. You can specify your transition criteria instead of needing to use ‘all’:

    .transition(@transitions) {
    transition:@transitions;
    -moz-transition:@transitions;
    -ms-transition:@transitions;
    -o-transition:@transitions;
    -webkit-transition:@transitions;
    }

    .transition(~’width .25s, height .25s, opacity .25s’);

Subscribe
Membership
About the Author