A little known feature of the upcoming Sass 3.2 release is the @content rule. What this does is allow you to add blocks to your @include statements. Here's an example:

@mixin awesome {
    .sauce {
        @content;
    }
}
.bottle {
    @include awesome {
        color:red;
    }
}

See how I've added a property block after the @include? This rather pointless example will generate something like this:

.bottle {
    .sauce {
        color:red;
    }
}

It's placed the block I added after the include where the @content rule was used in the mixin. The real benefit of this inception-style inclusion is that it allows us to do one, very, very, cool thing - inline media queries.

I'd previously added a bunch of Sass media queries to my Compass extension, Stitch, but I'm looking to expand on what I already have. This is one of the features I want to get into Compass 0.13. It changes the way we use media queries completely.

I've created a gist over on Github that covers a lot of the basic media queries that we have to deal with every day. Here's a really simple example of what it can do:

.module {
    @include mobile-only {
        width:auto;
        font-size:12px;
    }
    @include tablet-landscape-and-below {
        width:600px;
        font-size:14px;
        .sidebar {
            display:none;
        }
    }
    @include desktop-only {
        width:400px;
        .sidebar {
            width:200px;
        }
    }
}

Huzzah! Forget remembering media queries forever!

I'm trying to develop some really extensive media queries using Sass. But I need some feedback. Only after some solid, real-world testing will they be ready for the prime-time.

So if you get a chance, have a look at the gist and critique it. Media queries can be tricky and they can be used in lots of different ways.