Functions in SASS / SCSS

Functions in SASS / SCSS

Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return values in SASS / SCSS.

Functions are characterized utilizing the @function at-rule, which is composed @function <name>(<arguments…>) { … }

Following is the simple demonstration of how we can implement a function in SASS / SCSS. Let’s define the variable font-weights to allocate a name to respective font-weight such as light, regular and bold.

$font-weights:(
 “light”: 300,
 “regular”: 400,
 “bold”: 700
);

Next, we can define the function weight to integrate the font-weights class.

@function weight($weight-name){
  @return map-get($font-weights , $weight-name)
}

Now, we can directly leverage function by calling the function weight to define font-weight in CSS

.main{
  font-weight: weight(light);
}

The respective output CSS will be as follows:

.main{
  font-weight: 300;
}