Functions in SASS

Learn functions in sass. Create functions, call them and level up your SASS Skills.

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 a 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;
}

In the next tutorial, we will be learning Mixins in SASS