Compass mixins you should know about

Code4 min readView on GitHub

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, why not support the upkeep of this website?

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.

Also, as a subscriber I can provide critique on your designs—send something through after you confirm your subscription.