Responsive Theming for Drupal

Chapter 3. A Short Primer on Sass and Compass

Any conversation about responsive design would be remiss to leave out Sass and Compass. These little guys have slowly crept their way into the Drupal world (thankfully) and we’ll go into more detail about that in the next chapter. But first, you (being the astute reader that you are) might find yourself wondering what these words mean. Worry not—it’s actually pretty simple:

Sass

Sass stands for “Syntactically Awesome Stylesheets” and it can be an absolute godsend to anyone who writes a good bit of CSS. It’s basically an extension of CSS that adds some great features on top of it and smartly compiles down to regular old CSS so that the browser doesn’t know the difference. Some of the nicer parts include nested rules, variables, and mixins, but it brings a lot more than just that to the table.

SCSS

There are two basic flavors of Sass: Sass (the original) and SCSS (the more CSS-ish alternative). The difference is that SCSS looks and feels a lot like CSS (and any valid CSS is also valid SCSS since it’s just a superset of CSS), whereas Sass has a completely different syntax. Sass, like its older brother Haml, uses indentation rather than sticking with curly braces and semicolons to identify blocks. SCSS tends to be more comfortable for those familiar with CSS (which is why the examples in this book use it), but Sass is a little more concise and easily readable once you get used to it.

Compass

Compass takes things even further. It’s a ...