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;
}