LessCSS color controls, mixins, and absolutely consistent gradients with CSS3

Posted by Elf Sternberg as Design, web development

I love LessCSS, because it allows me to write CSS as code, with consistent thinking throughout. Today, I’m going to show you how to have button-shaped anchors with consistent gradients throughout your page, using the color scheme you’ve initially chosen.

LessCSS allows you to have parameterized mixins, small blocks of CSS that you can easily incorporate into other blocks of CSS. Let’s say I wanted to create two styles, “orange” and “blue,” based on two colors from my palette. Some buttons will be used for inner functions, some for outer commands. For my program, I want them to be anchors; they’re just taking you to views, not committing data. I have a consistent color for my border and text color; it’s only the background I’m showing how to highlight here.

.background_gradient(@base) {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: @base;
    background: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to(darken(@base, 5%)));
    background: -moz-linear-gradient(top,  lighten(@base, 5%), darken(@base, 5%));

See those ‘lighten’ and ‘darken’ commands? They’re a part of LessCSS; they automatically do exactly what they purport to do: lighten or darken the base color passed in. To see how these are used:

@orange_base: #f78d1d;
.orange { .background_gradient(@orange_base); }
.orange:hover { .background_gradient(darken(@orange_base, 10%)); }
.orange:active { .background_gradient(lighten(@orange_base, 10%)); }

@blue_base: #7db8db;
.blue { .background_gradient(@blue_base); }
.blue:hover { .background_gradient(darken(@blue_base, 10%)); }
.blue:active { .background_gradient(lighten(@oblue_base, 10%)); }

Now my CSS document will have two classes, “orange” and “blue”, which will resemble one another in the consistency of their gradients, saturation and value changes as they transition between the no-focus, hover, and active states. Pretty sweet consistency, and once you have a snippet like background_gradient, you can use it everywhere.  LessCSS provides functions for other color operations, such as ‘saturate’, ‘desaturate’, ‘spin’ (which rotates the color along the color wheel), ‘fadein’ and ‘fadeout’ (which affect the alpha channel of the color, if your browser supports those).  Now that’s super-cool.

LessCSS has been re-written in Javascript, meaning that you can now write your “style.less” and not have to pre-process it; the page will automatically parse it for you and re-feed it to the browser as CSS.  All you do is include lesscss.js in your page.  I still do pre-processing for the same reason I do minification and collapsing: performance.  But it’s nice to have this option.

1 Response to LessCSS color controls, mixins, and absolutely consistent gradients with CSS3

Keith Anders

November 4th, 2011 at 8:50 am

Thanks for bringing the JS capability to my attention. It is just the thing for the development phase of website design, with the server-side processing option available to improve performance of the final deployment. I wonder if you, or any of your readers, has anecdotal evidence of how an artistic designer feels when presented with LessCSS?

Comment Form

Subscribe to Feed



April 2011
« Mar   Jun »