Responsive Design – Sass and Compass – Intro

sass & compass

If we talk about responsive web design we can’t leave out Sass and Compass. These little gems help speed up and improve development and are now virtually an integrated part of Drupal. Let’s see what Sass and Compass refer to.

Sass stands for ‘Syntactically Awesome Stylesheets’ and it’s a priceless component for CSS writers. It is in fact an extension of CSS intended to add nice features on top of it and efficiently compile down to classic old CSS to trick the browser in not making the difference. Sass includes nested rules, variables, and mixins and more.

SCSS is another important concept. Sass is basically divided into two: original Sass and SCSS. SCSS basically looks and feels like CSS, as Sass uses a different syntax.  Just like the classic HTML, uses indentation rather than sticking with curly braces and semicolons to identify blocks. On the other hand, SCSS is a bit more comfortable to use by coders familiar with CSS. And any valid CSS is also valid SCSS. However, Sass is a bit more concise and easily readable.

Compass basically takes things to a new level. It is a framework built on top of Sass, a framework which adds lots of helpers, pre-build mixins, layout tools and other useful stuff. It’s also a Ruby gem, a command line tool that surveys Sass files for changes and can automatically and rapidly compile raw CSS for the browser.