O'Reilly logo

Responsive Theming for Drupal by Mike Crittenden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required