Chapter 5. Advanced Sass

In this chapter we'll look at some of the more advanced features of Sass. We'll take a comprehensive look at variables and in particular variable scope and using the !default and !global flags. We'll look at the problems which can arise when using local and global scope in mixins, functions, and selectors.

Then we'll look at creating a mixin which generates pure CSS arrows. To create this mixin we'll need to use extends and interpolation to dynamically use those extends from within our mixin. We'll also see how we can simplify checking for multiple values within an if statement using the index function.

We'll then create a mixin which will simplify writing media queries. We'll use the @content directive which allows us to pass additional properties, mixins, or extends to a mixin.

Lastly, we'll look at using maps. Maps will allow us to group similar variables into a key value set. We'll look at how to retrieve values and how we can simplify the process of retrieving...

Variables

Variables in Sass are not an advanced topic. They're one of the first things we start using in Sass. However, there are a few things you should understand about variables in Sass which are different to other languages. These include the !default flag and also how Sass handles scope.

!default

When you work on any medium-to large-sized Sass project you will want to make your project configurable from one place. The easiest way to achieve this is with well-made mixins and functions and, of course, variables.

Working on large projects can leave you with dozens and dozens of variables ranging from colors to padding, margins, font families, and font sizes. These might be used throughout your project or they may only need a few files (or one file). Some of these variables might only be used in one or two mixins or functions; however, these mixins and functions will need those variables in order to work.

This is where the !default flag is extremely useful. While working on a project you will...

Maps

Maps in Sass are like associative arrays in PHP, dictionaries in Python, and hashes in Ruby. If you're familiar with any of these data types, then you'll understand what a map in Sass is.

Essentially, a map is a set of unordered key/value (or name/value) pairs. The key is a string that holds a value that can be any data type; a string, integer, Boolean, list, or even another map.

Maps look a lot like nested lists in Sass, however they use a descriptive name which actually holds the value. The value is (usually) the part we're really interested in, however the descriptive keys allow you to explain what that value is, or what its purpose is.

Take the following list, which we may have used for our media mixin previously (if we didn't have maps):

$breakpoints: ( 
  (small 480px), 
  (medium 768px), 
  (large 980px) 
); 

What we're doing here is technically abusing a list. Here, we're using the first index of each nested list (small, medium, large) to name the second...

Summary

We've covered quite a lot in this chapter. We started by talking about why you should use the !default flag when defining variables throughout large projects to allow you to create manifest files (or config files) to allow easy customization of your project. From there we moved on to looking at the many issues which can arise from using (or rather misusing) variable scope in selectors, functions, and mixins.

Then we created a mixin for creating CSS arrows. This mixin used extends to reduce repetition in our CSS and allow dynamically including those extends, depending on the direction passed in to the arrow mixin using variable interpolation.

From there we moved on to using the @content directive to allow us to add properties to a mixin. We created a set of mixins which took advantage of the @content directive to simplify the creation of media queries.

Finally, we looked at using maps to group our breakpoint values while using useful names to identify them, which we were able to use...