Functions in SASS

Quick answer: Functions in SASS are custom blocks of logic that take arguments and return a calculated value, so you reuse a computation instead of repeating it. You define one with the function keyword, give it parameters, and return a result. SASS also includes built in functions for colours, maths, and lists, and values fit into properties.

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

Frequently asked questions