DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
mikkel250
mikkel250

Posted on

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!

Latest comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.