Tutorial: Creating a color button using LESS or SASS


by John Williams, Creative Director

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-formation. Turns out they weren’t talking about my outrageous personality. They were simply referring to CSS Preprocessors, LESS and SASS. CSS Preprocessor extend the functionality of CSS by adding lots of neat features that aren’t available with standard CSS. SASS stands for Synactically 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 function to create a CSS button using one base HEX value to add all the shadows, highlights and borders. You can do something 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 establish things like the border radius, font color and size, padding and whatnot.

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

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

LESS Variables

LESS supports variables. You can establish a variable and use it multiple places. This makes it easier to keep your code nice and lean. You define any variable by using the @ sign and giving it a unique name. We’ll establish our color variables 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 manipulate color values. You can lighten, darken, saturate, desaturate, and even mix HEX values. This is how we’re going to build our button colors

/* Give your function a classname and a unique string / .color-magic(@color) { / Establish the background 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 highlight 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 impression 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 function we just wrote in with the color variables we established. 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 function once rather than having to write a ton of duplicate 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.


About Search Discovery

Search Discovery is a digital intelligence company that empowers organizations to make better, dynamic and transformative business decisions. We're focused on delivering results for our clients through digital analytics, SEO, digital media, and technology.


Comments

Let's Talk.

You're excited. We're excited. Give us a shout so we can get this party started.

!
!
!