Sass and Compass for Designers (Community Experience Distilled)

Sass and Compass for Designers (Community Experience Distilled)

Ben Frain

Language: English

Pages: 224

ISBN: 1849694540

Format: PDF / Kindle (mobi) / ePub

Produce and maintain cross-browser CSS files easier than ever before with the Sass CSS preprocessor and its companion authoring framework, Compass

• Simple, clear, and thorough. This book ensures you don’t need to be a programming mastermind to wield the power of Sass and Compass!
• Previously tricky and time-consuming CSS tasks will become trivial. Easily produce cross-browser CSS3 gradients, shadows, and transformations along with image sprites, data URIs, and more.
• Follow along with installing, setting up, and working through an entire project, implementing the Sass and Compass techniques and tools as we go.

In Detail

The CSS preprocessor, Sass, is becoming the de-facto standard for producing cross-browser CSS more maintainable and with more ease. It supercharges CSS with features that make previously difficult and time-consuming tasks trivial. This book concentrates on distilling the techniques in a straightforward manner making it accessible to all, even to those that only know HTML and CSS.

Written by the author of the bestselling "Responsive Web Design with HTML5 and CSS3", Sass and Compass for Designers will explain everything you need to get Sass and Compass installed, mastered, and making your life easier. There will be no perplexing terminology or baffling syntax left unexplained. We'll get you set up and then build a site together, step by step, using the incredible power of Sass and Compass.

We will start with a completely unstyled HTML document and build a responsive Sass and Compass powered website step by step.

Sass and Compass make CSS easy. You'll learn how to manipulate color in the stylesheet with a single command, create responsive grids with ease, automatically create image sprites, and create CSS3 powered rules that work across all modern browsers.

"Sass and Compass for Designers" explains how to produce great CSS easier than ever before.

What you will learn from this book
• Install Sass and Compass on your system and then set up and maintain Sass and Compass powered projects!
• Learn how to easily manipulate colors; tinting, shading, mixing, and complementing existing colors in your stylesheets becomes a cinch.
• Make your own responsive CSS-based layout grid that scales across any viewport with no extra markup needed.
• Create media query-based CSS rules alongside existing styles, making responsive website building simpler.
• Explore Compass’s many helpers and tools. You’ll learn to embed images and fonts and produce advanced cross-browser CSS3.
• Create perfect image sprites with Compass in moments.
• Learn how to create loops with Sass to automate repetitive CSS tasks.
• Understand how to compartmentalize code, making your CSS more maintainable, understandable, and modular than ever before.


A step-by-step tutorial guide, taking you through how to build a responsive Sass and Compass powered website.

Who this book is written for

If you understand HTML and CSS, this book is all you need to take your code to the next level with Sass and Compass. No prior understanding of CSS preprocessors or programming conventions is needed.

HTTP Pocket Reference: Hypertext Transfer Protocol

SignalR: Real-time Application Development

HTML5 Games Development by Example: Beginner's Guide

Learning Joomla! 3 Extension Development (3rd Edition)

HTML5: Up and Running



















this project, and if any Sass files change, recompile the CSS". Now, whenever the Sass files within are changed, Compass will automatically note any changes and recompile the equivalent CSS files (the CSS is compiled into the stylesheets folder of a Compass project by default). Graphical tools for working with Sass and Compass There are a number of graphical tools that handle all of this Ruby gem shenanigan business (they all include their own versions of Ruby) and compile Sass files

Understanding HSL colors HSL works on a 360 degrees color wheel. Starting at the 12 o'clock position, yellow is at 60 degrees, green at 120 degrees, cyan at 180 degrees, blue at 240 degrees, magenta at 300 degrees, and finally red at 0 degrees. The first figure in an HSL color declaration (for example, hsla(315, 100%, 50%, 1)) represents Hue. So as the aforementioned HSL color had a hue of 315, it's easy to know that it will be between Magenta (at 300 degrees) and Red (at 0 degrees). The

ever before. And you don't need to be a rocket scientist to use it. Perhaps you've heard about Sass and Compass but feel blinded by terminology. Or maybe you conceptually understand all the benefits but don't know where to start. The book is aimed at web designers, not programmers. All you need is an understanding of HTML and CSS. With that knowledge and this book you can take your CSS skills to the next level and beyond. Conventions In this book, you will find a number of styles of

size of the CSS is 13.4 KB (13,461 bytes). That is already a slight improvement on our inline version. If that uncompressed CSS file is gzipped, the file size comes down to 3 KB (3,012 bytes). At this point, again, it is a slight improvement over the 3KB/3058 bytes of the inline version. If that CSS was compressed first, the file size is 11.1 KB (11,135 bytes). This file is saved as combined-mq-test_compressed.css. Our inline file version was 11.8 KB/11,805 bytes at this point. If the

stack for it (it's smart enough to know it isn't needed). Despite this, let's use a Compass mixin to include a shadow on our headline style. Tip I have added the FitText.js jQuery plugin by the venerable Dave Rupert ( into the plugin.js file—this just lets the text scale and fills the area provided. When viewport-relative units are supported cross-browser (more info on those here:, this shouldn't be

Download sample