by John Williams, Creative Direc­tor

The last time someone told me I needed LESS SASS, I told them they need to step off as I snapped my fingers in a z-forma­tion. Turns out they weren’t talking about my outra­geous person­al­ity. They were simply refer­ring to CSS Preproces­sors, LESS and SASS. CSS Preproces­sor extend the func­tion­al­ity of CSS by adding lots of neat features that aren’t avail­able with stan­dard CSS. SASS stands for Synac­ti­cally Awesome Stylesheets and LESS which stands for Leaner CSS, but who cares. Why are these so cool?

For the purposes of this demo, we’re going to use LESS to write a simple func­tion to create a CSS button using one base HEX value to add all the shadows, high­lights and borders. You can do some­thing like this with SASS. If you do, please reply with your version.

*Note: You can tinker with the code for this over on Codepen.io. *

Default Styles

The first thing we’ll want to do is create a base button style. We’ll estab­lish things like the border radius, font color and size, padding and whatnot.

.button{ font: bold 16px/21px Helvetica; color:#fff; text-deco­ra­tion: none; border-radius:6px; padding: 10px 20px; }

So far this is all pretty stan­dard stuff. The next bit is where it gets really cool

LESS Variables

LESS supports vari­ables. You can estab­lish a vari­able and use it multi­ple places. This makes it easier to keep your code nice and lean. You define any vari­able by using the @ sign and giving it a unique name. We’ll estab­lish our color 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 ability to manip­u­late color values. You can lighten, darken, satu­rate, desat­u­rate, and even mix HEX values. This is how we’re going to build our button colors

/* Give your func­tion a class­name and a unique string / .color-magic(@color) { / Estab­lish the back­ground color / background:(@color); / Darken the base color by 30% to add a color drop shadow to the button text / text-shadow:0 1px 0 darken(@color,30%); / Darken by 20% for the border / border:1px solid darken(@color,20%); / Add a high­light to the top of the button with an inset box-shadow / box-shadow:inset 0 1px 0 lighten(@color,20%); / You can add pseudo-classes by using an & nesting inside the rule / &:hover{; background:lighten(@color,10%); } / The active state needs to look pushed in / &:active { / The button should be a bit darker / background:darken(@color,5%); / A deeper shadow will give the impres­sion of the button 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 color vari­ables we estab­lished. Create your CSS color classes and make sure you add it to your button.

Button .hotpink {.color-magic(@hotpink);} .red {.color-magic(@red);} .orange{.color-magic(@orange);} .yellow {.color-magic(@yellow);} .ltgreen{.color-magic(@ltgreen);} .green {.color-magic(@green);} .aqua{.color-magic(@aqua);} .blue {.color-magic(@blue);} .purple {.color-magic(@purple);}

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

Click here to see the final result

So next time someone suggests you could use a little LESS/SASS, don’t take off your tiara and feather boa. Just fire up your text editor and get to work.