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.
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).
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.
You can also set the
$default-border-radiusto 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($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($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-image. But pretty much anything you can throw at a css3 background it can take, and then add the right prefixes to. For example:
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?