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 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 page and give Sass or Scss a go.