Chapter 2. Sass – The Road to Better CSS

In this chapter, we will cover:

• Setting up a simple project based strongly on typography.
• We'll look at using Sass from the command line and the various options we can pass to take control of our output.
• We'll then set up our project's configuration variables using !default to allow easy overriding in future. These variables will control all of our functions and mixins and will allow the end user to have full control of our Sass library, without needing to touch mixins or functions.
• We'll look at writing a small but flexible library of functions and mixins that will deal with setting up a base typography style for our default body, text, and headings. This will be based around the optimal reading line length of 60-80 characters while keeping our font sizes and line heights uniform even when we change font families.
• We'll write functions and a mixin to handle the output of our headings and keep the best font sizes and line heights for each heading for sans and serif.
• We'll then look at using lists and nested lists to reduce repetition in our mixins. We'll look at tackling one problem with two different loops and the pros and cons of both approaches.
• Finally, we'll go back over all of our functions and add some much needed error handling by using @error and @warn.