O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

10Calculating 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required