Version 3.2 of SASS adds this incredibly helpful piece of functionality: the ability to pass @content blocks to a mixin. In order to check this out you’ll need to install the pre-release build of Sass since the 3.2 stable is not out yet. Open up your shell and run the following:

1

gem install sass --pre

This should install an alpha version of Sass 3.2 (alpha 35 at the time of writing). With that installed we can now try out the new feature.

So what do I mean by passing content to a mixin? We can already pass in parameters, isn’t that the same thing? Not quite. Consider the following example, as elegantly illustrated by Chris Eppstein in a Gist from several months ago.

What if we could easily keep our responsive media style rules grouped with the content it defines rules for, but not clutter our file with @media rules? Say, by doing something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

#content {

  width:960px;

  @include media(tablet) {
      width:720px;
  }

  @include media(mobile) {
      width:90%;
  }

}

Pretty nice, right? It makes much more sense to keep our media rules inline like this, rather than grouping them into a separate file or section of the document. For small sites it’s not too big of a deal, but when you’re dealing with stylesheets for larger sites, it’s a pain to locate the associated @media rules and make changes in potentially 4 different locations (default, tablet, mobile, wide mobile).

This is exactly what we can do with this new release of Sass. Here’s what the mixin looks like on the other end:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@mixin media($type) {

  @if $type == tablet {

      @media only screen and (min-width:768px) and (max-width:991px) {
          @content;
      }

  }
  @else if $type == mobile {

      @media only screen and (max-width:767px) {
          @content;
      }

  }

}

Everything looks pretty standard here except for the addition of our new keyword “@content”, which is equal to whatever content you pass into the mixin inside of the curly braces.

Check out the link above for some more examples of how this might be used. I’m especially excited for being able to use this for defining animation keyframes. Unfortunately, for now, Compass doesn’t seem to parse this correctly.