Published on: 07 April, 2016

SASS Math Calculation

Tumblr Digg Google Plus

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

Comments

Matri
21 November, 2017
#wrapper{width: 1000px;} 1000*.25=250 1000*.3=300 Total=550 -1000==450 #left-content{width: 250px;} #right-content{ width: 300px;} #mid-content{width: 450px;}
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.