Pragmatic Guide to Sass 3: Tame the Modern Style Sheet

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.

What You Need:

A solid understanding of CSS, and either comfort using the command line or installing GUI software on your computer. Sass 3.4 installed on any Mac, Linux, or Windows machine.

Table of Contents

Part I. Language Basics
Chapter 1. Installing Sass
Chapter 2. Scoping Selectors With Nesting
Chapter 3. Commenting
Chapter 4. Advanced Scoping
Chapter 5. Css Output Styles
Chapter 6. Importing Files
Chapter 7. Defining Variables
Chapter 8. Keeping Code Clean With Mixins

Part II. Simple Use Cases
Chapter 9. Calculating A Simple Layout
Chapter 10. Creating Themes With Advanced Colors
Chapter 11. Resetting Css
Chapter 12. Using Media Queries
Chapter 13. Organizing Your Style Sheets

Part III. Advanced Mixins
Chapter 14. Adding Mixin Arguments
Chapter 15. Using More Mixin Argument Tricks
Chapter 16. Controlling Flow With @If
Chapter 17. Manipulating @Content
Chapter 18. Using Mixins For Cross-Browser Compatibility

Part IV. Values in Sass
Chapter 19. Understanding Value Types In Sass
Chapter 20. Interpolating
Chapter 21. Using Lists To Work With Multiple Properties
Chapter 22. Looping Through Lists
Chapter 23. Manipulating Lists
Chapter 24. Using Maps For More Detailed Collections
Chapter 25. Looping Through Maps
Chapter 26. Manipulating Maps
Chapter 27. Using Maps For Namespace Configuration

Part V. Advanced Language Features
Chapter 28. Creating Your Own Functions
Chapter 29. Debugging Your Sass
Chapter 30. Using & To Implement Bem
Chapter 31. Using @Extend As A Mixin Alternative
Chapter 32. Using Placeholders With @Extend
Chapter 33. Understanding The Dangers Of @Extend
Chapter 34. Escaping Indentation With @Root

Part VI. Libraries and Frameworks
Chapter 35. Fully Featured Frameworks
Chapter 36. Using Grid Systems For Layout
Chapter 37. Introducing Eyeglass
Chapter 38. Doing Math With Eyeglass
Chapter 39. Spriting With Eyeglass