Speed up your SASS with Compass Mixins


 One of the great things about SASS is mixins. They are lovely.  But building them can take as much time as just typing out the things they’re supposed to speed up.  So wouldn’t it be nice if someone came along and gathered all the most common ones in one place, so you could import them in seconds? Well, Let Me Tell You, Someone(s) Has! And it’s called  Compass, a must-have addition to Sass.

Here is their sales pitch:

Why designers love Compass.

  1. Experience cleaner markup without presentational classes.
  2. It’s chock full of the web’s best reusable patterns.
  3. It makes creating sprites a breeze.
  4. Compass mixins make CSS3 easy.
  5. Create beautiful typographic rhythms.
  6. Download and create extensions with ease.

And though those are great points (heck I didn’t even realise they could do sprites), let’s get practical. Below are 4 are examples of the mixins/functions.  (The install is pretty easy, easier still if you’ve used Ruby before).

Border Radius

This is the one I mentioned yesterday in my post.
It is pretty simple and you can pass one or two values. The first value is for all corners or horizontal radius if there are two values. The second is the vertical radius.
border-radius($radius, $vertical-radius)
You can also set the $default-border-radius to any value you want. And then just call border-radius() when you need it. This makes it easy to modify all border radii with one change.

Link Colors

Changing colors for all link states can require quite a bit of space.This mixin does it in just one line.
link-colors($normal, $hover, $active, $visited, $focus)
And if you want to make the css delcartion even shorter, you can do:
a+link-colors($normal, $hover, $active, $visited, $focus) and it will even fill in the curly brackets for you.

Box Shadow

This is a set and forget one like border-radius.
box-shadow($hoff, $voff, $blur, $spread, $color, $inset)
lets you do a single box shadow or you can set all the variables as defaults
$default-box-shadow-color, $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-inset
and then just call
when you need it.

Background images/gradients/colors

This one is a bit counter intuitive in naming as it is called background-image. But pretty much anything you can throw at a css3 background it can take, and then add the right prefixes to. For example:

@include background-image(
radial-gradient(45px 45px, cyan 10px, dodgerblue 30px);
linear-gradient(to bottom right, white, #aaaaaa)

So those are a few examples of how to use compass mixins and functions, but don’t forget about the native SASS functions!

So what do you think, can/has SASS save you time? What mixins/functions would you like to see?


Leave a Reply

Your email address will not be published.