Skip to content

Instantly share code, notes, and snippets.

@CodeRecipez
Last active December 15, 2015 12:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeRecipez/5264393 to your computer and use it in GitHub Desktop.
Save CodeRecipez/5264393 to your computer and use it in GitHub Desktop.
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