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...