CSS Master

Variables

Anotherfeatureofpreprocessorsarevariables. Variables allow us to store a
value―say, a font size or color―in one place and reuse it in another. Later, if we
change that value globally, we only need to update a single line.

Variablesareanoft-requestedfeatureforCSS.Forafewyears,itlookedlikethey
wouldbecomearealitywiththeCSSvariablesspecification.^11 Unfortunately,
FirefoxistheonlybrowserthatsupportsstandardCSSvariablescurrently.Chrome
andOperapauseddevelopment(althoughrecentlyrestartedit),whileInternetEx-
plorerisstillweighingitup.Preprocessorsgiveusthiscapabilitynow.

VariablesareoneareawherethesyntaxofLessandSassdiffer.Lessvariablesmust
beginwithan@symbol:

@brand-color: #0e79c4;

ForSass,prefixvariablenameswithadollarsign(the$character):

$brand-color: #0e79c4;

Inbothcases,variablesaredefinedmuchlikeCSSpropertyvalues,usingacolon
ratherthananequalssign.Wecanthenusethemasvaluesinourrulesets:

h1 {

color: @brand-color; // or $brand-color if using Sass.

}

Variablesareespeciallyusefulformanagingcolorsandfontstyles.Forexample,
youmightstoreaproject’scolorvaluesinavariables.lessor_vars.scsspartial:

$brand-color-a: #ff3b00; // Tomato red

$brand-color-b: #f8f8ff; // Cool white

$img-border: #708090 // Cool gray

Thenwecanuse@importtopullthesevaluesintoourCSS.

(^11) http://dev.w3.org/csswg/css-variables/
Preprocessors 339