Functions in Sass

The final piece of the puzzle is functions.
Defining a function in Sass is similar to the syntax for a mixin:

// a variable that holds a value for use later
$w: 2px;

// defining the function
@function double($x) {
  @return 2 * $x;
}

.thin-border {
  border-width: $w;  // results in a 2px border-width
}
.thick-border {
  border-width: double($w); // results in a 4px border-width
}

Using function and combining them with other features of Sass, such as conditionals, allows for great flexibility when coding your CSS.

Hope you enjoyed this series! If you want more details and experience practicing the syntax with exercises, check out the course on which these notes are based here at Frontend Masters, and big thanks to them and Mike North such great material!