by John Williams, Cre­ative Director

The last time some­one told me I need­ed LESS SASS, I told them they need to step off as I snapped my fin­gers in a z-for­ma­tion. Turns out they weren’t talk­ing about my out­ra­geous per­son­al­i­ty. They were sim­ply refer­ring to CSS Pre­proces­sors, LESS and SASS. CSS Pre­proces­sor extend the func­tion­al­i­ty of CSS by adding lots of neat fea­tures that aren’t avail­able with stan­dard CSS. SASS stands for Syn­ac­ti­cal­ly Awe­some Stylesheets and LESS which stands for Lean­er CSS, but who cares. Why are these so cool?

For the pur­pos­es of this demo, we’re going to use LESS to write a sim­ple func­tion to cre­ate a CSS but­ton using one base HEX val­ue to add all the shad­ows, high­lights and bor­ders. You can do some­thing like this with SASS. If you do, please reply with your version.

*Note: You can tin­ker with the code for this over on Codepen.io. *

Default Styles

The first thing we’ll want to do is cre­ate a base but­ton style. We’ll estab­lish things like the bor­der radius, font col­or and size, padding and whatnot.

.but­ton{ font: bold 16px/21px Hel­veti­ca; color:#fff; text-dec­o­ra­tion: none; border-radius:6px; padding: 10px 20px; }

So far this is all pret­ty stan­dard stuff. The next bit is where it gets real­ly cool

LESS Variables

LESS sup­ports vari­ables. You can estab­lish a vari­able and use it mul­ti­ple places. This makes it eas­i­er to keep your code nice and lean. You define any vari­able by using the @ sign and giv­ing it a unique name. We’ll estab­lish our col­or vari­ables like so:

@hotpink: #df4da2; @red: #d8252c; @orange:#F58026; @yellow: #f1ac28; @ltgreen:#a6ba23; @green: #17932e; @aqua:#32b8b6; @blue: #4888f1; @purple: #9b29ff;

Writing the function

LESS has the abil­i­ty to manip­u­late col­or val­ues. You can light­en, dark­en, sat­u­rate, desat­u­rate, and even mix HEX val­ues. This is how we’re going to build our but­ton colors

/* Give your func­tion a class­name and a unique string / .color-magic(@color) { / Estab­lish the back­ground col­or / background:(@color); / Dark­en the base col­or by 30% to add a col­or drop shad­ow to the but­ton text / text-shadow:0 1px 0 darken(@color,30%); / Dark­en by 20% for the bor­der / border:1px sol­id darken(@color,20%); / Add a high­light to the top of the but­ton with an inset box-shad­ow / box-shadow:inset 0 1px 0 lighten(@color,20%); / You can add pseu­do-class­es by using an & nest­ing inside the rule / &:hov­er{; background:lighten(@color,10%); } / The active state needs to look pushed in / &:active { / The but­ton should be a bit dark­er / background:darken(@color,5%); / A deep­er shad­ow will give the impres­sion of the but­ton being pressed */ box-shadow:inset 0 1px 2px darken(@color,30%); }

Putting it all together

The final step is to tie the func­tion we just wrote in with the col­or vari­ables we estab­lished. Cre­ate your CSS col­or class­es and make sure you add it to your button.

But­ton .hot­pink {.color-magic(@hotpink);} .red {.color-magic(@red);} .orange{.color-magic(@orange);} .yel­low {.color-magic(@yellow);} .ltgreen{.color-magic(@ltgreen);} .green {.color-magic(@green);} .aqua{.color-magic(@aqua);} .blue {.color-magic(@blue);} .pur­ple {.color-magic(@purple);}

So by using LESS, we can write our func­tion once rather than hav­ing to write a ton of dupli­cate rules.

Click here to see the final result

So next time some­one sug­gests you could use a lit­tle LESS/SASS, don’t take off your tiara and feath­er boa. Just fire up your text edi­tor and get to work.