Pragmatic Guide to Sass 3

Tame the Modern Style Sheet

by Hampton Lintorn Catlin and Michael Lintorn Catlin

Design websites faster than ever using Sass—the most mature and popular CSS meta-language. On any platform, integrate Sass into your project, create a reusable style guide, and use maps to drastically reduce duplication in your stylesheets. You’ll see how to code the right way in Sass with short, clear examples on two-page spreads that show the explanation on one side and code examples on the other. This ultimate guide to using Sass, written by its creator, is updated and expanded with all the new features found in Sass 3.4, making you an expert in no time.

Sass lets you write CSS faster and more easily by enabling you to use features that regular CSS doesn’t have yet. Bring the power of Sass to your projects, whether you use Node.js, Ruby, or any other programming language. This updated Pragmatic Guide gives you brief, targeted hands-on examples in an easy-to-follow modular format.

Use variables to easily change color values, measurements, or fonts across a whole project. Pare down large style sheets into comprehensible code with maps and placeholder selectors. Organize your Sass with media queries to make maintainable, responsive designs. Create your own layout systems and build shared tooling across projects that make designs more consistent. Learn the differences between extends and mixins. Build data structures to make creating site-wide color schemes a breeze, and use placeholder selectors to keep style sheets cleaner. Pass content through mixins, prevent accidental deep nesting of selectors, and use cutting-edge modular add-ons in the new Sass ecosystem, such as Eyeglass, Susy, and Bourbon Neat.

This revised guide covers all the new features in Sass 3.4, including selector parsing and manipulation. Make full use of all Sass’s features by updating to the most mature and powerful CSS toolchain out there.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2016/07/06
• B2.0 2016/06/14
• B1.0 2016/04/27

• Acknowledgments
• Welcome!
• Part I — Language Basics
  • Task 1. Installing Sass
  • Task 2. Scoping Selectors with Nesting
  • Task 3. Commenting
  • Task 4. Advanced Scoping
  • Task 5. CSS Output Styles
  • Task 6. Importing Files
  • Task 7. Defining Variables
  • Task 8. Keeping Code Clean with Mixins
• Part II — Simple Use Cases
  • Task 9. Calculating a Simple Layout
  • Task 10. Creating Themes with Advanced Colors
  • Task 11. Resetting CSS
  • Task 12. Using Media Queries
  • Task 13. Organizing your Style Sheets
• Part III — Advanced Mixins
  • Task 14. Adding Mixin Arguments
  • Task 15. Using More Mixin Argument Tricks
  • Task 16. Controlling Flow with if ** Task 17. Manipulating content
  • Task 18. Using Mixins for Cross-Browser Compatibility
• Part IV — Values in Sass
  • Task 19. Understanding Value Types in Sass
  • Task 20. Interpolating
  • Task 21. Using Sass Lists to Work with Multiple Properties
  • Task 22. Looping Through Lists
  • Task 23. Manipulating Lists
  • Task 24. Using Maps for More Detailed Collections
  • Task 25. Looping Through Maps
  • Task 26. Manipulating Maps
  • Task 27. Using Maps for Namespace Configuration
• Part V — Advanced Language Features
  • Task 28. Creating your own Functions
  • Task 29. Debugging your Sass
  • Task 30. Using & to Implement BEM
  • Task 31. Using extend as a Mixin Alternative ** Task 32. Using Placeholders with extend
  • Task 33. Understanding the Dangers of extend ** Task 34. Escaping Indentation with root
• Part VI — Libraries and Frameworks
  • Task 35. Fully-Featured Frameworks
  • Task 36. Using Grid Systems for Layout
  • Task 37. Introducing Eyeglass
  • Task 38. Doing Math with Eyeglass
  • Task 39. Spriting with Eyeglass
• A1. SassScript Function Reference
• A2. Introduction to Haml
  • Haml Walkthrough: ERB 114
  • Haml Walkthrough: HTML 118

Hampton Lintorn Catlin is the inventor of Sass, Haml, and Wikipedia Mobile. With 20 years’ experience building websites used by millions of people a day, he’s one of the most respected developers in the industry.

Michael Lintorn Catlin is a web developer; co-founder of rarebit, a boutique tech consulting firm; and co-creator of Wordset, the collaborative online dictionary. Michael has dual masters’ degrees from both Oxford and Cambridge Universities.