Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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.

operations_inside_function.scss

SassMeister Gist

@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment