Originally published at: http://www.sitepoint.com/sass-basics-function-directive/
I recently wrote an article about the basics of Sass, specifically the @mixin directive. In keeping with the theme of highlighting the basics of Sass, this time I will be talking about the @function directive.
What a function does
@function remy($pxsize) {
@return ($pxsize/16)+rem;
}
h1 { font-size: remy(32);}
A function looks a lot like a mixin, and they both accept the same types of arguments. Although they look similar,a Sass function behaves differently. While a mixin makes our life easier by lessening typing repetative code, a function allows you to strip repeatable logic from your code. For example, in the code above we are using a function to calculate a rem value for a given pixel size. The resulting code would be:
h1 { font-size: 2rem; }
As you can see instead of applying styles to an element like you would with a mixin, all a function does is return a value for use in your stylesheets.
Function or a Mixin
The key to understanding when to use a function versus a mixin is knowing what you want. A mixin is used to create styles that would be a chore to continually write. Using a mixin you could easily write these styles with one line of code. When writing mixins you will be tempted to include calculations.We could have wrote the remy function as a mixin: