Pragmatic Guide to Sass

Written by Sass creator Hampton Catlin and Michael Lintorn Catlin, Pragmatic Guide to Sass shows you how to you to improve your CSS, from the basics to advanced topics, from first installation to sprucing up your buttons. You’ll see how to code the right way in Sass thanks to short, clear examples. Two-page spreads show the explanation on one side and code examples on the other. You’ll learn how to improve your pages in minutes.

You’ll be able to perform amazing feats of CSS including using variables, calculating layouts, and modifying colors. Did you ever want to make a color 10% less saturated? We’ll show you how to do that without needing a calculator.

Plus, learn about Compass, Sass’s library of carefully built hacks, reusable parts, and frameworks. Find out how to shortcut cross-browser issues and develop mixins for shortening text and making lists more exciting. You’ll wonder how you spent all those years styling sites without it!

Make things even easier with Blueprint, and discover how to use its predefined classes that you can apply to your Web site. From selector scoping to bundling, debugging, and designing custom functions, Pragmatic Guide to Sass will help you build the pages you’ve always wanted.

What You Need:

An installation of Sass and Compass

Some basic command line knowledge

Table of Contents

Part I Basics
Task 1. Installing Sass
Task 2. Compiling Sass into CSS
Task 3. Using Sass with Rails
Task 4. Avoiding the Command Line: Using Scout
Task 5. Commenting
Task 6. Selector Scoping
Task 7. Going Further with Advanced Scoping
Task 8. Altering the CSS Output
Task 9. Defining Variables
Task 10. Calculating a Layout
Task 11. Creating Themes with Advanced Colors
Task 12. Importing
Task 13. Building a Font Family Library
Task 14. Resetting CSS

Part II Advanced
Task 15. Keeping It Semantic: @extend
Task 16. Keeping Code Clean with Mixins
Task 17. Taking Mixins Further with Variables
Task 18. Debugging
Task 19. Generating Cross-Browser Rounded Borders
Task 20. Using Cross-Browser Opacity
Task 21. Interpolating
Task 22. Stop Repeating Yourself with @each
Task 23. Determining Conditions with @if
Task 24. Changing Looks with Nested @media

Part III Compass
Task 25. Setting Up for a Compass Project
Task 26. Resetting: Much Easier with Compass
Task 27. Sprucing Up Your Lists
Task 28. Making Lists Horizontal
Task 29. Sticking a Footer to a Window
Task 30. Stopping Overflow with Clearfix
Task 31. Truncating Text Using Ellipses
Task 32. Stretching Elements
Task 33. Jazzing Up Layouts with Columns
Task 34. Spriting

Part IV Blueprint CSS
Task 35. Producing More Two-Column Layouts
Task 36. Using Predefined Fancy Fonts
Task 37. Making Beautiful Buttons

A1. SassScript Function Reference
A2. Introduction to Haml