Lesson Weekend

Sass does a great job of integrating functionality traditionally reserved for programming languages like JavaScript into code for styles, as seen in the reusable variables and mixins we just discussed. So it should be no surprise that Sass supports other logical operators too!

This lesson will walk through mathematical operators supported by Sass, and how we can use them to further DRY our styles and maximize our own development time with handy shortcuts.

Mathematical Operators

Creating web layouts requires quite a bit of math! When we want to space elements evenly, or make things symmetrical we often need to do calculations to ensure they're positioned correctly on the screen. With Sass, we can actually write these calculations directly into our styles, instead of doing 'back-of-the-napkin'-style math.

Sass supports operators for addition +, subtraction -, multiplication *, division /, and modulo %. You've seen and used each of these in Intro to Programming, so their general use should be review. Let's briefly explore how these tried-and-true operators can create shortcuts for us in our Sass styles.

Required Video: Mathematical Operators by NetNinja

Watch the following brief video depiction of how mathematical operators can help us develop Sass layouts even more efficiently: