Using Sass Mixins

Published on Jul 23, 2013
The power of Sass comes out when you start to understand and use mixing. It helps to understand the basics of CSS first before attempting to try to use Sass (or I would recommend Scss first since its markup is close to CSS). In working with Sass more you start to realize that you need to create your own mixin libraries to keep all the code manageable and upgradeable. If you use libraries, such as, Compass or Bourbon then you will have a lot of mixing at your fingertips. In this post I am speaking to those developers who want to create their own so here are the basics of mixing. ## Create a Mixin Sass mixins can be described as code snippets. They also allow you to extend them with variables in order to change a default value should the need arise. And it usually always does. First I am going to make a mixin for the CSS3 border-radius spec.
@mixin border-radius($radius: 4px)
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	border-radius: $radius
The mixin above contains all the necessary browser prefixes to make the border radius work. I can now include it anywhere in one of my stylesheets for use like so `@include border-radius`. The `4px` that I have added to the example is a default value, so wherever I decide to include the border-radius mixin it will always have the value of `4px`. However, down the road you may want to change the border radius of a particular new design, but leave the default alone. To override the default value just specify a new value to send your mixin, which is what `$radius` is meant for.
 article
	@include border-radius
section
	@include border-radius(6px)
From the mixin I have changed the value of the section tag to have a border radius of `6px` while the article tag has the default value of `4px`. It's just that easy. ## Font Mixin Setting font properties can become repetitious and especially having to type all the different properties are not much fun either. So let's create a font mixin to help us target all the `h1` tags on our site.
@mixin heading-text
	font:
		family: Arial
		size: 2em
		weight: normal
	color: #333
h1
  @include heading-text
**Compiled CSS**
a {
  font-family: Arial;
  font-size: 2em;
  font-weight: normal;
  color: #333333; }
However, you may notice that this is not as flexible as our last example, so let's mix in a few variables for family, size, weight, and color.
@mixin heading-text($family, $size, $weight, $color)
	font:
		family: $family
		size: $size
		weight: $weight
	color: $color
h1
  @include heading-text(Arial, 2em, normal, #333)
h2
  @include heading-text(Helvetica, 1.5em, bold, #555)
**Compiled CSS**
h1 {
  font-family: Arial;
  font-size: 2em;
  font-weight: normal;
  color: #333333; }
h2 {
  font-family: Helvetica;
  font-size: 1.5em;
  font-weight: bold;
  color: #555555; }
The compiled CSS shows that we can do something a little more extreme with our headings now and can change any values we want. The example above does have some pitfalls especially since I didn't include any default values. In a real-word application you may want to set some default values for font-weight and color in order to keep a consistent color scheme, but you can still change them when calling your include if you want to. So that is mixing in a nutshell. A great resource to read a little more in-depth on the subject of mixins can be found on in [Sass resource pages](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin) and if you are still unsure what you can do with Sass mixins then I would definitely recommend it. Also, if you want to experiment with creating your own head on over to the [Sass Try](http://sass-lang.com/try.html) page and give Sass or Scss a go.
Justin Hough author picture
Justin Hough

Chief Development Officer at Hounder. He is a Christian, husband, father, writer, developer, designer, and a digital carpenter crafting amazing web experience. Also, created the Centurion Framework many moons ago.