LESS Variables

Give Your CSS Some Core Variables

Every client has a color palette. We use them in design. They're an essential foundation for good designs. So why do we struggle to have one in code?

In coding, variables are used all the time. They're essential. The web wouldn't be the web without variables. Variable and dynamic content and real programming changed the web from a static place to a dynamic place with life. So why is your CSS stuck in the 90's?

With variables, you can create palettes, repeat often used things like widths, fonts, sizes, effects, anything and everything in CSS. The best part is, you don't have to remember the hex code, but you can use clever names like "frog green" (thanks Renee) or stick to the brand name, like "Plastics Red" and you'll know what you're using.

FastAnimation, slowAnimation, Highlight, Deselected, whatever you want. Use them all throughout your CSS (LESS). The best part is, when that client changes the yellow to orange at the last minute because someone on the committee hates lemons, with a simple change of your variable's declaration, every place you had yellow in the speed of CTRL+SHIFT+R is now orange.

Variables make life easy.

@perdue-blue : #003c71;
@perdue-blue-darker : #002a4f;
@bright-blue : #00a3e0;

@transitionNavAll : all 500ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);//easeInOutSine
@transitionNavAllFast : all 250ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);
@transitionNavColor : color 125ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);
@transitionNavBG : background-color 125ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);

@h1Size : 48px;
@h2Size : 36px;

@shadow : 0px 5px 25px 0px rgba(0,42,79,0.15);
@no-shadow : 0px 0px 0px 0px rgba(0,0,0,0.0);

@clarity : marriner;