Salient commentary from the creators of Sass and Compass … a must-read!
Sass and Compass in Action is the definitive guide to stylesheet authoring using these two revolutionary tools. Written for both designers and developers, this book demonstrates the power of both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences.
preface
acknowledgments
about this book
about the authors
about the cover illustration
Part 1 Getting acquainted with Sass and Compass
1. Chapter 1 Sass and Compass make stylesheets fun again
1.1. Getting started with Sass
1.2. Hello Sass: DRYing up your stylesheets
1.3. What is Compass?
1.4. Create a Compass project
1.5. Solve real-world CSS problems with Compass
1.6. Summary
2. Chapter 2 Basic Sass syntax
2.1. Working with variables
2.2. Nesting CSS rules
2.3. Importing Sass files
2.4. Silent comments
2.5. Introducing mixins
2.6. Trimming CSS with selector inheritance
2.7. Summary
Part 2 Using Sass and Compass in practice
3. Chapter 3 CSS grids without the math
3.1. What is a grid?
3.2. Getting started with grids
3.3. Using Blueprint
3.4. Using 960.gs
3.5. Vertical rhythm with Compass
3.6. Summary
4. Chapter 4 Eliminate the mundane using Compass
4.1. A better blank slate with targeted resets
4.2. Utilities for faster, better-looking typography
4.3. Layout helpers
4.4. Summary
5. Chapter 5 CSS3 with Compass
5.1. What is CSS3?
5.2. Using CSS3 with Compass
5.3. Support for Internet Explorer with CSS PIE
5.4. Summary
Part 3 Tuning for production
6. Chapter 6 Spriting
6.1. How do CSS sprites work?
6.2. Why is spriting necessary?
6.3. Spriting with Compass
6.4. Configuring Compass sprites
6.5. Mastering the magic with sprite helpers
6.6. Summary
7. Chapter 7 From prototype to production
7.1. Abstracting URLs
7.2. Prototyping with Sass and Compass
7.3. Deploying to production
7.4. Summary
8. Chapter 8 High-performance stylesheets
8.1. Measuring client-side performance
8.2. Avoiding HTTP requests with server-side @import
8.3. Reducing transfer time with compression
8.4. Speeding up page loads with asset hosts
8.5. Inline data URIs
8.6. Selector performance
8.7. Summary
Part 4 Advanced Sass and Compass
9. Chapter 9 Scripting with Sass
9.1. Using expressions
9.2. Understanding data types
9.3. Functions
9.4. Using expressions in selectors and property names
9.5. Control directives
9.6. Summary
10. Chapter 10 Creating and sharing a Compass extension
10.1. Sharing and reusing stylesheets
10.2. A simple extension
10.3. Creating an extension demo project
10.4. Writing an advanced extension
10.5. Creating a template
10.6. Distributing extensions
10.7. Summary
Appendix A: Installing Sass and Compass
Appendix B: Getting started with Compass
Appendix C: The Sass syntaxes
index
© 2014 Manning Publications Co.
About the Technology
Sass is an extension of CSS3, adding language features for creating well-formatted, standard CSS using the command line tool or a web-framework plugin. Compass is a framework that sits atop Sass and tackles common stylesheet problems such as grid layouts, handling CSS3 vendor differences, and production environment stylesheet optimization. Together, they do for CSS what jQuery has done for JavaScript: solve real world problems, letting designers and developers create stylesheets more efficiently.
About the book
For 15 years, we've been using CSS to patiently paint the web by hand. No more! Sass and Compass add scripting and a library of components to standard CSS so you can simplify stylesheet authoring, automate tedious tasks, and add dynamic styling features to your pages. Think of Sass and Compass as power tools that allow you to paint with remarkable speed and precision.
Sass and Compass in Action is a hands-on guide to stylesheet authoring using these two revolutionary tools. This practical book shows you how to eliminate common CSS pain points and concentrate on making your pages pop. You'll begin with simple topics like CSS resets and then progress to more substantial challenges like building a personal stylesheet framework to bundle and reuse your own approaches and opinions.
What's inside
- CSS for desktop and mobile web apps
- Loaded with examples and reusable techniques
- Authors are Sass and Compass creators and core team members
About the authors
Wynn Netherland is a full stack web developer who cohosts The Changelog Podcast. Chris Eppstein is the creator of Compass and a member of the Sass core team. Brandon Mathis is a passionate professional web designer with deep Sass skills. Nathan Weizenbaum is the creator and lead developer of Sass.