Sass Mixins – Taking it up a level.

By | October 10, 2012

Today we’re taking it up a notch. We’ve had a good grounding in the basics of Sass. We’ve also explored Compass and Scout and what they can do for us so now it’s time to delve further in and look it depth at Sass and in particular mixins today. Ok…. So knowing me we’ll probably cover other ground too but the main gist of today will be mixins….because they’re ace! So before we start what does the what does the official website say about them.

Even more useful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.

Basic Mixins

So we had a quick look at mixins in our first post in the series What is Sass? and they are really the backbone of Sass. So let’s have a look again and explain what’s going on.

/* SCSS */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

So what’s happening. We’re creating a mixin called ’rounded-corners’ with the @mixin directive and just like a function we are passing in parameters. The parameter in this case is going to be a pixel value that we use to set the border radius. Inside the mixin curly brackets we then have all the browser specific rules written pretty much in standard css. The only difference is that instead of declaring the pixel values for each rule we pass back in the parameter. Very much like functions in other languages. (I should stop using this analogy because Sass has functions as well).
To use the mixin we do this:

/* SCSS */
.btn {
  @include rounded-corners(4px);
}
}

And the output is:

/* CSS */
.btn {
   border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

But you knew all this so what is this post about?

Parameter Defaults

Well you can go further than this, you can add defaults to your parameters so if you don’t declare a parameter you can have it use the default.

/* SCSS */
$color: #000000 !default;
$width: 1px !default;
$style: solid !default;
@mixin border($color, $width, $style) {
  border: {
    color: $color;
    width: $width;
    style: $style;
  }
}

Here we’re setting default values for the parameters that will be used by the mixin if no value is passed in when the mixin is included.

/* SCSS */
div { 
 @include border(); 
}

This will output

/* CSS */
div { 
  border-color: #000000;
  border-width: 1px;
  border-style: solid; }
}

Brilliant. But then can override certain defaults whilst keeping others.

/* SCSS */
div { 
 @include border(blue, 5px); 
}

This will output

/* CSS */
div { 
  border-color: blue;
  border-width: 5px;
  border-style: solid; }
}

So as you can see it takes the two parameters we passed in and the default style parameter declared above the mixin.
This is fine but in the above example we have to declare the parameters in order but what if you want to change the last parameter, well you can also do this

/* SCSS */
$default-color: #000000 !default;
$default-width: 1px !default;
$default-style: solid !default;
@mixin border($color:$default-color, $width:$default-width, $style:$default-style) {
  border: {
    color: $color;
    width: $width;
    style: $style;
  }
}

Now we’ve set the defaults by creating variables which allows us to target any of the parameters that we want to change in any order.

/* SCSS */
div { 
 @include border($style:dashed); 
}

This will output

/* CSS */
div { 
  border-color: #000;
  border-width: 1px;
  border-style: dashed; }
}

Isn’t this stuff awesome. What the hell did we do before Sass….oh yeah write stuff long hand, ridiculous. Once your head is round this stuff, I don’t think you can ever go back.

Variable Arguments

So another way to send in multiple parameters into a mixin is through variable arguments. So a variable argument is a variable with multiple arguments (or values). For example:

/* SCSS */
$params: #666 2px dashed;

Then we pass these into the mixin when we include or call it.

/* SCSS */
$params: #666 2px dashed;
div { 
 @include border($params...); 
}

This will output

/* CSS */
div { 
  border-color: #666;
  border-width: 2px;
  border-style: dashed;
}

Just brilliant and so easy to use.

Content Blocks and Mixins

So the last thing I want to talk about here are content blocks and passing those into mixins because this is a really powerful feature and is used heavily to create responsive media queries in Sass but in this post we’ll just look at the basics.

/* SCSS */
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}

This example is taken from the Sass site but it perfectly shows what this does. So here we have a mixin and this is named to show these styles are only to apply to IE6 (obviously nobody bothers with this stuff anymore do we?). So the @content directive will place any content passed into the mixin when it is included inside the ‘* html’ selector and by doing that target that content only for IE6 (but you knew that right?).
Ok so the include look like this.

/* SCSS */
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

Hopefully this make sense all the content inside the outer curly brackets is seen as the content block. So the output of this is

/* CSS */
* html #logo {
  background-image: url(/logo.gif);
}

Very powerful stuff. We’ll look deeper into these in one of the later posts when we create a responsive framework for Sass.

Other posts in the series

12

One thought on “Sass Mixins – Taking it up a level.

  1. MFA

    Nice post! We like this “sass mixins” and One thing We appreciate your efforts, Whole concept is fine keep posting, We’d recommend this blog to other users…

    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *