So far we have learned about the history behind Sass, .sass files vs. .scss files, and a bit of a refresher on OOCSS. Now you are ready to get your hands dirty and writing some sass code. The code you'll see in this chapter is not too different from writing any CSS project you have seen; we have to evaluate the design, all the elements involved, and the modules to be created. We will continue with our sample project, incorporating the design elements using Sass. We will also look at some of the existing code and evaluate how we will optimize it further using Sass.
In this chapter, while continuing our project, we will learn about variables, scoping, !default flag, and how to setup a _config.scss file. We will also cover an introductory example of mixins and some of the guidelines for creating a mixin. These are some of the infrastructure that we need to setup in order to further expand on the design and build our stylesheet, so let's get started by looking at the needed variables.