Tools of the trade #1 LESS CSS

There are a number of game changing tools that once upon a time I didn't know, and now that I do know, I wish I always knew.

I know there are more tools I will wish I knew, and that's why I love what I do.

So here's some tools which if you don't know, you'll soon wish you did.

LESS CSS

LESS advantage #1: CSS Functions.

You can specify a function such as 'rounded-corners', pass it parameters such as radius, and have it spit out the 5 different ways of making the corners round into any other class/element/id in your stylesheet.

LESS advantage #2: CSS Namespaces.

All headings within top-nav are to be #777 Arial, all headings in the main content should be left alone. The top-nav is to be 900px wide.

top-nav{
    width: 900px;
    h1 {
        color: #777;
        font-family: arial;
    }
}

LESS advantage #3: Variables.

Specify variables such as colors, widths, file locations in variables which can be used throughout the stylesheet.

LESS advantage #4: Other cool things.

Perform functions like 'lighten by' and 'spin by' on colors. Etc etc. It has all of those things which you wish CSS had.

Concern #1: Speed and Compatibility.

LESS can be compiled on the client's computer. Solution: I don't go with that, I compile it into single CSS files on the development machine as part of my deployment scripts (using node.js).

Concern #2: I don't know LESS, I do know CSS:

LESS compiles to CSS. It also can read CSS.

If you change your file extension from .css to .less and run it through the filter, it will work*, then you can use as little or as much functionality as you are comfortable with. I.E. the learning curve is minimal/negligible.

(* Most of the time. If your css has errors, it won't compile, but you probably should fix those anyway)

Now go here http://lesscss.org/ and check it out.