Viewed: 6121

Compass mixins you should know about

Code in 2 minutes

Compass is a brilliant extension to Sass as we all know. We know the time saving CSS3 related mixins it offers, maybe you don’t know some of the lesser praised mixins/functions that offer a similar convenience. I’m going to run through a few of my favourites that I have come to rely on.


The simplest way to clearfix any element that needs it.


@include pie-clearfix;


&:after {
  content: "";
  display: table;
  clear: both; }
    *zoom: 1;


The simplest way to hide text for text replacement. Also has a direction parameter.


@include hide-text(left);


text-indent: -119988px;
overflow: hidden;
text-align: left;

image-width & image-height

Get the width/height of any image passed to it. This is really helpful when you need an element to match the dimensions of the image. It also allows you to freely change the image dimensions, with only needing to recompile.


width: image-width("path/to/image");


width: 500px;

Another excellent usage for these two functions is with a 2x image mixin which was posted on the 37signals blog

@mixin image-2x($image) {
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: url($image);
    background-size: image-width($image)/2 image-height($image)/2; } }

This mixin makes an already easy way to do retina/2x images easier, with taking the need to add image dimensions.


The previous mixin and function are a pretty much a combination of the two in this mixin. Pass an image, and it’ll replace it with that including the width and height. No thought whatsoever!

Note: if you don’t have the correct images_dir, and relative_assets = true in your config.rb file, you’ll probably run into problems.


@include replace-text-with-dimensions("image.png");`


text-indent: -119988px;
overflow: hidden;
text-align: left;
background-image: url('../images/image.png?1356101732');
background-repeat: no-repeat;
background-position: 50% 50%;
width: 300px;
height: 400px;


I usually have a few consistent styles I want across all headings, h1-h6. A convenient way to have h1, h2, h3, h4, h5, h6 is using headings().


#{headings()} {
  font-weight: 700; }


h1, h2, h3, h5, h6 {
  font-weight: 700; }

scale-lightness and scale-saturation

My last blog post was about using scale-color over darken and lighten shortly after that I found that Compass offers a simpler usage of the main things I use scale-color for.


color: scale-lightness(#f00, 20%);


color: #ff3333


These are some of the best functions/mixins within Compass that once you get them into habit really can save you time. Enjoy.

If you found this article useful or it’s saved you time, I would be grateful for your support.

Next to read

Using scale-color in Sass

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.