Pragmatic Guide to Sass

10	Calculating a Layout

Sass allows you to do calculations on the fly and in your document: you can easily type width: 12px * 0.5; in your code!

…

OK, OK—we admit that’s not terribly useful. But it is once we throw variables into the mix. Once we’ve defined a variable, Sass allows us to perform basic operations on that variable using standard operators for adding, subtracting, multiplying, and dividing (+, -, *, and /). The operators will be familiar to anyone who has done any amount of programming before.

We could say something like width: $page_width * 0.1 as a way to avoid hard-coding pixel values. When the CSS is compiled, this will be precalculated and will print out an exact width in pixels.

We can now do previously laborious tasks like ...