@function

Function Directives

It is possible to define your own functions in sass and use them in any value or script context. For example:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Becomes:

#sidebar {
  width: 240px; }

As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return to set the return value of the function.

As with mixins, you can call Sass-defined functions using keyword arguments. In the above example we could have called the function like this:

#sidebar { width: grid-width($n: 5); }

It is recommended that you prefix your functions to avoid naming conflicts and so that readers of your stylesheets know they are not part of Sass or CSS. For example, if you work for ACME Corp, you might have named the function above -acme-grid-width.

User-defined functions also support variable arguments in the same way as mixins.

For historical reasons, function names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a function called grid-width, you can use it as grid_width, and vice versa.