Chapter 9. Scripting with Sass
This chapter covers
- Manipulating CSS values that Sass understands
- Using built-in Sass functions for advanced math and color themes
- Defining your own functions to avoid repetitive calculations
- Using control directives to create advanced, reusable mixins
In the last chapter. we looked at how to optimize your stylesheets to get the best performance out of the browser. In this chapter, you’ll learn how to optimize Sass for readability and maintainability, and how to write smarter stylesheets that go way beyond the limitations of CSS.
You’ve already learned about the many benefits Sass adds on top of plain CSS. Variables, nested rules, and mixins all help to make CSS less repetitive. Mixins in particular are a good way to refactor repeated styles and patterns in a stylesheet and make them reusable.
But variables and mixins on their own can only go so far toward expressing patterns that you use in your stylesheets. Sometimes you want to avoid doing width calculations over and over, or you want a mixin to have slightly different styles under different conditions. For this, you need Sass’s more advanced scripting features, which we’ll introduce in this chapter.
The core of advanced Sass use is the ability to manipulate CSS values (the sort that appear as property values). Sass supports all the arithmetic for numbers that you learned when you were seven: they can be added, subtracted, multiplied, and divided. It even understands units, so 5px + 10px = 15px.