Sass Basics: The 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

[code="sass"] @function remy($pxsize) { @return ($pxsize/16)+rem; } h1 { font-size: remy(32);} [/code]

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:

[code="css"] h1 { font-size: 2rem; } [/code]

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:

Continue reading %Sass Basics: The Function Directive%

by Reggie Dawson via SitePoint