Charles Bulger

If you’re not using LESS CSS for your new web design projects, you’re coding too slowly. Way too slowly. If you’re not familiar, LESS CSS is essentially a functional programming language wrapper for CSS. It allows you to use variables, operations, functions, and “mixins”, which are basically reusable CSS classes with dynamic parameters.

Learning LESS takes about ten minutes, especially if you’re at all familiar with other scripting languages like PHP or Javascript. Once you’re using it, it’s pretty hard to go back.

There’s a pretty great set of LESS Mixins available on http://lesselements.com, compiled and written by Dmitry Fadeyev. I use a slightly modified version of his set, along with a few additional mixins I’ve found to be very useful. Here are my contributions: (I’ve included my full elements.less file at the end of the post, which you can download and use freely).

Multiple LESS CSS Box Shadows:

When coding up sexy CSS3 buttons, I like to add a slight drop-shadow effect, along with an inset box-shadow to add some depth. With the default box-shadow mixin on lesselements, it’s only possible to have a single box-shadow on one element. This variation allows for 2, and could easily be modified for more if necessary.

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
            box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
       -moz-box-shadow: @shadow1, @shadow2;
}

 

It’s important to note that the box-shadow mixin takes “arguement” style parameters, not delimited by commas. So, for example, I could call

.box-shadow(inset 0 1px 1px #67CE4F, 0 2px 3px rgba(0, 0, 0, .2));

This method allows for each box shadow argument to use other functions as well, such as darken(), desaturate(), etc.

Rounded-Table

Although heavily reliant on CSS3 support, this mixin allows you to quickly give each corner of a TABLE element a border-radius. Note: this mixin is dependent on the border-radius mixin included in the lesselements set. Also, I’ve modified that mixin slightly to start the paraments with the top-left corner of an element, instead of top-right. It just feels more natural. I’ve included my full elements.less file at the end of this post for reference. Anyway:

.rounded-table(@table_radius: 3px) {
     th {
         &:first-child { .border-radius(@table_radius, 0, 0, 0); }
         &:last-child { .border-radius(0, @table_radius, 0, 0); }
         &:only-child { .border-radius(@table_radius, @table_radius, 0, 0);}
     }
     tr:last-child {
         td:first-child { .border-radius(0, 0, 0, @table_radius); }
         td:last-child { .border-radius(0, 0, @table_radius, 0); }
         td:only-child { .border-radius(0, 0, @table_radius, @table_radius); }
     }
}

Zebra Stripe

Self explanatory. To be used on a TABLE element.

.zebra-stripe(@stripe_color: #F0F0F0) {
    tbody tr:nth-child(2n+1) { background: @stripe_color; }
}

Box Sizing (for 100% width Form Elements)

As discussed in my previous post, you can use css box-sizing property to work with 100% width form fields within a container element. Here’s a LESS mixin so you don’t have to write out the vendor-prefixes every time.

.border-box() {
            box-sizing: border-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
}

 

As promised, here’s a link to my full elements.less file. It also includes a quick CSS Reset, base HTML5 styling for block-level elements, and a few simple classes I use all the time. To use, simply include it into your main style.less file with:

@import "elements.less";

Compiler

I’m a big fan of SimpLESS for compiling .less files into .css before uploading them. Using the Javascript compiler is fine for development, but you’ll definitely want to pre-compile before you go into production.

textarea {
         box-sizing: border-box;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}