Description

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.

Contents and Extracts

• <b>Acknowledgments</b>
• <b>Welcome!</b>
• <b>Part I — Language Basics</b>
  • Task 1. Installing Sass
  • Task 2. Scoping Selectors with Nesting
  • Task 3. Commenting
  • Task 4. Advanced Scoping
  • <b>Task 5. CSS Output Styles</b>
  • Task 6. Importing Files
  • Task 7. Defining Variables
  • Task 8. Keeping Code Clean with Mixins
• <b>Part II — Simple Use Cases</b>
  • 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
• <b>Part III — Advanced Mixins</b>
  • <b>Task 14. Adding Mixin Arguments</b>
  • 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
• <b>Part IV — Values in Sass</b>
  • 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
• <b>Part V — Advanced Language Features</b>
  • Task 28. Creating your own Functions
  • <b>Task 29. Debugging your Sass</b>
  • 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
• <b>Part VI — Libraries and Frameworks</b>
  • 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
• <b>A1. SassScript Function Reference</b>
• <b>A2. Introduction to Haml</b>
  • Haml Walkthrough: ERB 114
  • Haml Walkthrough: HTML 118