Hampton Catlin - Pragmatic Guide to Sass

Wed both like to thank the entire team at Pragmatic, who are a great bunch of people to work with. They made the process of writing really enjoyable. In particular, our editor, Kay Keppler, and managing editor, Susannah Pfalzer, were personable and always on hand to answer our most inane questions.

Wed also like to thank our tech reviewers: Peter Cooper, Eric Redmond, Shawn Allison, Jeff Patzer, Trevor Burnham, Bruce Williams, Aaron Godin, and Ian Dees. Your insights were extremely useful.

Hampton: Most importantly, Id like to thank Nathan Weizenbaum, whose endless hours of coding and bug fixes and extensions make Sass what it is today. And I cant forget Chris Eppstein, whose creation of Compass truly changed the Sass landscape forever.

Michael: Thanks to my parents, Alan and Jayne, for not giving me too much grief over stopping my PhD. Final thanks go to the GMO for keeping us sane.

Welcome to the Pragmatic Guide to Sass . Sass (Syntactically Awesome Style Sheets) enables you to do amazing things with your style sheets, helping you describe how HTML is laid out on a web page. Sass is an alternative way of writing CSS.

Whats wrong with regular ol CSS? we hear you cry. The fact is that CSS, with all its power and elegance, is missing some crucial, simple elements that other types of development take for granted. CSS can also be a bit complicated to read: Sass fixes that.

Most programmers are familiar with the concept of DRY D ont R epeat Y ourself. It saves time and effort when writing code. A core philosophy of Sass is to reduce repetition in style sheets, and well be coming back to DRY a few times throughout the guide.

Sass isnt really a replacement for CSSits a way to help us write better CSS files, which is essential for large projects. Sass helps us write clear, semantic style sheets. Sass updates CSS development for the future.

Hampton originally designed Sass while he was working at Unspace in Toronto, and Nathan Weizenbaum and Chris Eppstein now maintain it. A lot of Sass functionality depends on Ruby. (But dont worry, well learn how to install Ruby in Part 1, .)

In this book, well be using the word Sass as an overarching concept that describes the engine we use to convert our files into CSS. We can use two syntaxes to write SassSCSS and Original Sass. These will be described a bit later in this preface.

This book is for people who know the pain of working on the CSS of a mature websitewho have faced a CSS file that four people wrote and that mutated into a huge, sprawling, incoherent mess. Weve looked the beast in the eye and barely survived.

Youre probably already familiar with CSS, HTML, and the ideals of semantic web development. We can all agree that markup should be about logic instead of about presentation (as much as possible). And well assume that youre familiar with margins, padding, the box model, @media queries, and the myriad of other CSS-related technologies.

If you are looking for a CSS-ninja power-up, youve come to the right place.

Some of the terms associated with CSS can be quite confusing, so weve added a short introduction to how we name things in the book. Also, there are two different syntaxes for writing Sass that need to be distinguished.

We thought it would be useful to go through a couple of technical terms well be using for different aspects of CSS markup. If youre already familiar with selectors, declaration blocks, and the like, you can probably skip this part.

Lets use a small bit of CSS as an example:

Here we have p, which we call the selector . What follows (the bit inside the curly braces) is the declaration block . The two linesone defining the color and one defining the font sizeare known as declarations . Each declaration has a property and a value . The property in this case is the color or the font size. The value is the color itselffor example, #336699, blueor the size of the fontfor example, 20px.

The use of classes and IDs allows us to define sets of declarations that will only be applied to specific sections of our HTML. Sass allows you to create much richer selectors, as well see in Part 1, .

SCSS, which stands for S assy CSS, is one of the syntaxes we use to write Sass. The grand aim of SCSS is to keep the look of CSS while introducing the units of Sass. If youre familiar with CSS, its pretty easy to read. We still use selectors, classes, and IDs. We open a curly brace to start the declaration block, and we separate out declarations with semicolons. Whats extra is the added functionality.

When we use the word Sass , well mostly be referring to the SCSS syntax.

Before SCSS, there was Original Sass, which strips out some of the unnecessary elements of CSS and SCSS. Original Sass can be compiled just the same as SCSS, via the Sass engine.