SASS Mixins

I have only just recently “dipped my toes” into what I thought was the cold water of the CSS pre-processor pool. But, to my surprise, I have found SASS to be a time-saving and intriguing tool. I thought I would share a mixin that I found on Pluralsight and used to create my own. The mixins relate to border-radius and then I used a similar approach to create a padding mixin.

SASS mixins allow you to set “rules” that can be used repetitively and in different contexts. I like to think of mixins like a method or a function. They accept (but do not necessarily HAVE to) parameters and then do some work within the body.

A great example of this is a mixin to resolve the boxing-sizing bug in IE. If you wanted to incorporate this fix in your CSS, you would need to include all three browser prefixes in each instance of the CSS class where you want to set the rule. However, SASS lets you set the rule once, and then just reference the rule each time. This is especially useful with Google branching the web-kit engine which could possibly create another browser engine. If this does happen, all you need to do is update your SASS mixin and then all instances of CSS classes that use that mixin will also be update immediately.

Firstly, I like to create a scss file for all my mixins. So I have a mixins.scss file in my project. Then, at the beginning of my site.scss file, I have an import statement that says @import "mixins";. This works without a full path reference because both files exist in the same folder.

This is the layout of the border-box-fix mixin in my mixins.scss file.

@mixin border-box-fix {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Then, in my site.scss file. I want to apply the border-box file rule to any div with the classname of box-fix. Then I use this syntax.

div.box-fix {
  @include border-box-fix;
}

Now all divs matching that selector will have the border-box fix applied.

I mentioned that mixins can accept parameters. This is true and is very useful for mixins that may need to set multiple values. An example of this is the border-radius rule. The mixin rule looks like this.

@mixin set-border-radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) {
  -moz-border-radius-topleft:		$topleft;
  -moz-border-radius-topright:		$topright;
  -moz-border-radius-bottomright:	$bottomright;
  -moz-border-radius-bottomleft:	$bottomleft;
  -webkit-border-radius:		$topleft $topright $bottomright $bottomleft;
  border-radius:			$topleft $topright $bottomright $bottomleft;
}

The parameters re-use the $topleft variable because if you pass just one variable to the mixin, that variable will be used on all corners of the border-radius. However, you can pass all four variables and potentially set each corder attribute to a different value. See the power of SASS?

I have taken this to another step and used it for setting padding values. Instead of having a myriad of padding settings throughout my CSS with different values each time, I have created a mixin which accepts a value for the padding. Then I just call the mixin with a different value and set different increments of padding. Let me explain.

The mixin looks like this.

@mixin set-padding($top, $right: $top, $bottom: $top, $left: $top) {
  padding-top:		$top;
  padding-right:	$right;
  padding-bottom:	$bottom;
  padding-left:		$left;
  padding:		$top $right $bottom $left;
}

Now, in my site.scss file, I have a number of classes created that use the mixin. These classes have indicative names to describe their function. For example:

.padding-small { @include set-padding(2px); }
.padding-medium { @include set-padding(6px); }
.padding-large { @include set-padding(10px); }

Now, if I want to change the padding rules I just need to change it in the mixin file. Once updated, all the classes will inherit the change and all elements will be updated.

I hope this makes sense. I think I may have got a little carried away in my excitement of using SASS. My next post might go into some detail on how to use SASS in a Visual Studio solution using NuGet.

Til next time …


3 Comments

Leave a Reply

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