5 Useful Sass and Compass Extensions for Responsive Drupal Development

by: acabouet

Are you using a CSS preprocessor? You should be! Preprocessors are the new face of CSS and they’re basically all upside, turning the over-extended styling language into the sleek, object-oriented, thing of beauty it was meant to be. We’re partial to Sass here at Outlier, but there are many other options (like LESS and Stylus) to choose from.

One of the best things about Sass is how established its community has become in its relatively brief lifespan. Web developers worldwide are working together to help evolve the language: churning out mixins, libraries, and frameworks that are designed to make frontend development DRYer, more maintainable, and just more fun.

One of the best Sass frameworks is Compass. Compass is a Sass compiler. It’s also a powerful (and free) swiss army knife: it comes with a ton of generally useful mixins (easy inline lists! plug and play CSS3 gradients! sticky footers!) out of the box. It’s also incredibly extensible, allowing industrious developers to create extensions that take the grunt work out of a number of tricksy frontend tasks. In this blog post I’ll take a look at and go over five of the extensions we’ve found most useful in our projects here at Outlier.

  1. Zen Grids. Still using static widths and floats for your layouts? You’re way behind, son! Responsive grids are the way of the future. Zen Grids make them easy, doing all the math for you and tying it all up into tidy, easily updated functions. Want a div that spans 5 columns of your 12 column grid? Define your grid with zen-column-count: 12 and then add this mixin: @include zen-grid-item(5, 1) to your div’s styles. That’s it. Want the div to start in the third column of your layout? @include zen-grid-item(5, 3). Seriously.

  2. Susy. Susy is Zen Grids on a healthy, balanced breakfast. It includes all the power of Zen and adds the ability to define your own custom functions for more complex layouts. It’s not as easy to get up and running but once you’ve figured it out, Susy will quickly have you feeling like a jedi.

  3. Sass Globbing. Here’s a mandatory extension with a funny name. One of the most powerful features of Sass is its ability to compile smaller SCSS files created for development (called partials) into one giant stylesheet for browsers. Instead of having to edit a huge, three thousand line document, your project is broken into smaller, manageable chunks that you define. While you can probably quickly understand why this is useful, you may also wonder how you’ll keep those partials organized, especially in a larger project. Sass Globbing is your answer. Build the directory structure that works best for your team, sort your partials into folders as you see fit, and then use Sass Globbing to keep them all corralled and compile them all at once (or on the fly with compass watch). Sass Globbing watches the parent directories you declare and automatically adds any new partials that are created to your import statement. So you can have dozens of partials in many child folders and still only use one import statement for each parent directory.

  4. Breakpoint. Media Queries are pretty easy to implement but don’t you think they could still be easier? Us too! Breakpoints takes the media queries you know and love and adds the goodness of variables and the simple syntax of a mixin. Define your breakpoints once, use them everywhere, and keep it DRY!

  5. Modular Scale. Are you still eyeballing your relative font sizes? No! Bad! Don’t do that. This extension helps you create more beautiful, more meaningful typography with the power of the Golden Ratio.

That’s it! We think this list is a good introduction to some useful tools but there are literally hundreds of Compass extensions and hardcore advocates for each and every one of them. Diving in can be daunting but luckily the Sass community has you covered with Sache, a search engine for Sass extensions. Use it and this listicle and go forth and build pretty websites!

Outlier

Video, Web, and Design Agency