CSS Master

Variable Interpolation

LessandSasshaveafeaturecalledvariableinterpolation.Variableinterpolation

letsyouusevariablevaluesinwaysotherthanaspropertyvalues.Thinkofinter-

polationasatemplatesystemforbuildingselectorandvaluestrings.Wrapthe

variablenameinaspecialsyntax:#{}forSassand@{}forLess;thetoolreplaces

themwiththevariable’svaluesduringcompilation.

Youmay,forexample,wanttodefinepartofaselectornameusingavariable.Here’s

anexampleusingSass:

$prefix: sports;

Tobuildtheselectorname,you’dusethefollowingsyntax(again,forSass).Notice

herethatwe’reusingtheentirevariablename,includingthe$prefixinsidethe

curlybraces:

.#{$prefix}-section {

background-color: #0000ca;

}

Andhere’sthesameexampleusingLess.WithLess,weonlyneedthevariable

name:

@prefix: sports;

.@{prefix}-section {

background-color: #0000ca;

}

Whencompiled,bothexamplescreatethisoutput:

.sports-section {

background-color: #0000ca;

}

Youcanuseinterpolationforallyourvariables,notjustforselectornames.Infact,

you’llfinditabsolutelynecessarywhenyourCSSsyntaxisambiguousforthe

compiler.Let’slookatanotherexampleofcodeambiguitythataffectstheSass

compiler.ConsiderthisSCSS:

340 CSS Master