Sass does support math calculation on the fly for your document css. The calculation technique is useful especially you want to automatically set a specific width based on percentage calculation. The supported formula includes adding, subtracting, multiplying and dividing.
Let's consider we have a full layout of 1000px and we want to divide them into 3 columns which will be the left content, middle content and right content. The left hand side will have 20% width, while the right hand side will have 30% proportion of the width, and the remaining middle content will have 50% width.
See the following example code.
$templateWidth: 1000px; $leftContent: $templateWidth * 0.25; $rightContent: $templateWidth * 0.30; $midContent: $templateWidth - ($left-content + $right-content); #wrapper{ width: $templateWidth; } #left-content{ width: $leftContent; } #right-content{ width: $rightContent; } #mid-content{ width: $midContent; }
When you perform a sass compilation, the following css output will be produced.
#wrapper{ width: 1000px; } #left-content{ width: 200px; } #right-content{ width: 300px; } #mid-content{ width: 500px; }