$base-font-size: 16px;
$base-line-height: 1.5;body {
font: 100 $base-font-size / $base-line-height sans-serif;}YoumightexpectthistocompiletothefollowingCSS:
body {
font: 100 16px / 1.5 sans-serif;
}Lesshandlesthisasyou.dexpect.WithSCSS,though,whatyouendupwithis
this:
body {
font: 100 10.66667px sans-serif;
}Sasspermitsmathematicalexpressionsaspropertyvalues.Inthiscase,the/char-
acteristreatedlikeadivisionoperatorinsteadofvalidCSSsyntax.Togetaround
this,weuseinterpolation:
body {
font: 100 #{$base-font-size} / #{$base-line-height} sans-serif;
}NowthepreviousSCSSwhencompiledgivesustheoutputweexpect:
body {
font: 100 16px / 1.5 sans-serif;
}BothLessandSasshavemoreadvancedvariablecapabilitiesthanwhatwe’ve
coveredhere.Consulteachtool’sdocumentationformore.
Preprocessors 341