Sass mixins as functions

Sass mixins are pretty handy if you want to re-use same snippet of css at multiple places. But did you know they can act like functions as well?

Recently I was writing css for this website itself and had some code like this:

{
  font-family: 'Calibre Light';
  font-size: 20px;
}

Now I needed to use this font at multiple places, but with different font-sizes. So I thought I will separate font-family alone into a mixin and use it everywhere. Went ahead to look for mixin syntax in sass docs and found out a cool thing in the example there. Sass mixins accept arguments just like functions in many other languages!

So now I can pass in the font-size as param:

@mixin font-calibre-light($size) {
  font-family: 'Calibre Light';
  font-size: $size;
}

And use the mixin like this:

.post-content { @include font-calibre-light(22px) }

.post-meta { @include font-calibre-light(17px) }