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.
Pragmatic Guide to Sass 3: Tame the Modern Style Sheet
by Hampton Lintorn Catlin and Michael Lintorn Catlin
Pragmatic Guide to Sass 3
Tame the Modern Style Sheet
by Hampton Lintorn Catlin and Michael Lintorn Catlin
Sass is the abstraction that CSS needs. You would do well to learn it, and
learn it well, by reading this book.
- Chris Coyier
How better to learn about the features of Sass than from the guy who came
up with it in the first place? Hampton, along with Michael, do a fantastic
job of explaining the basics of Sass, then they go all the way up to the more
advanced features. They even show some of the new, modern frameworks
and techniques to help take Sass further. Definitely worth a read for beginners
and advanced Sass developers alike.
- Jina Bolton
Lead designer, Salesforce Lightning Design System
Pragmatic Guide to Sass 3 is the quintessential book on Sass written by two
of the only authors qualified to write such a definitive work. If you are
new to Sass, this is the first book that you should read. If you are a Sass
veteran, this book will become your go-to reference guide.
- Micah Godbolt
Author, *Frontend Architecture for Design Systems*
Sass is one of the most exciting web technologies to date, and whether
you are brand-new to front-end development or a seasoned veteran of the
web, you’ll gain an in-depth look at the intricacies of how Sass works and
all of its latest features in this book. Pragmatic Guide to Sass 3 is a mustread
for web developers and designers of all stripes.
- Smith Schwartz
UX engineer and Sasstronaut
About this Title
Release: P1.0 (2016-07-06)
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.
Contents & Extracts
- 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.