Sass 101 - A newb's guide: Operation inside a function

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

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 you will see in the following example, creating a function that allows for custom arguments based on global values and uses Sass operations can be a powerful tool.

@function em($target, $context: $default-font-size) {
  @return $target / $context * 1em;
}

@function percent($target) {
  @return $target * 1%;
}

$base-font-size: 16;
$default-font-size: 12;

html {
  font-size: em($default-font-size, $base-font-size);
}

.class {
  font-size: em(12);
  width: em(500);
  padding: em(20);
  margin: percent(25);
}

SassMeister Gist