DEV Community

loading...

Functions in Sass

mikkel250
I've been tinkering with computers since I was a teen. I'm currently pivoting from my current role as Tech Support manager to Full Stack Web Developer. I'm actively seeking employment in the field.
・1 min read

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!

Discussion (0)