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:
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:
And use the mixin like this: