SASS @function At-rule

SASS @function at-rule is used to define functions with complex operations, taking in arguments and returning a result. SASS functions are used to declare complex formulas and behaviors which can then be used throughout the stylesheet.

SASS @function: Syntax and @return at-rule

SASS functions are defined using the @function at-rule. Following is the syntax,

@function <name>(<arguments...>) { ... }

Unlike SASS mixins, the SASS function must have a return statement that is specified using the @return at-rule and is used to return a result from the function call.

So the overall syntax becomes this,

@function <name>(<arguments...>) {
    // function definition
    @return <somevalue>
}

The @return at-rule can only be used inside a function definition and the function execution ends upon encountering the @return statement, and the result of the function, as specified with the @return at-rule, is returned to the calling statement.

SASS Functions with Arguments

Just like we can provide arguments in SASS mixins, we can also do so while defining SASS functions.

Let's define a simple function which will add the two arguments provided to it and will return the result of the addition.

@function add($var1, $var2) {
    $var3 : $var1 + $var2;
    @return $var3;
}

This function can be used in the stylesheet using the normal CSS function syntax as follows,

div{
    height: add(300, 400) * 1px;
}

As you can see in the above CSS code, we have to specify values for the arguments while calling the function.

SASS Functions - Argument with Default Values

We can also set the default value for arguments while defining a function so that if the user doesn't pass any value, the default value of the argument is used. Let's modify the same example that we used above:

@function add($var1, $var2: 400) {
    $var3 : $var1 + $var2;
    @return $var3;
}

While calling the function we can pass either one or two parameters. If one parameter is passed then other argument will take the default value. If both parameters are passed while calling the function then the defualt value is overrided by the value provided at time of function call.

div {
    height: add(300) * 1px;
}

SASS Functions - Keyword Arguments

While calling a function, we can provide the value for the argument along with the name of the argument as specified in the function defintion. So instead of passing the arguments in order or their number, they can be passed by name as well.

Let's see how will we call the add function defined above, by providing keyword arguments at the time of calling the function.

div {
    height: add($var2: 300, $var1: 400) * 1px;
}

SASS Functions - Taking Arbitrary Arguments

Sometimes we need to pass different number of parameters to a function in different scenarios. For such usecase we can define our function to take any number of arguments and this could be done the same way as we saw in mixins i.e. when the last argument ends in three dots (ex: $abc...) which is known as the argument list. So when this function is called, all the parameters provided at time of function call are available in the function argument as a list of values, which can then be used in the function.

Let's take an example,

@function min($numbers...) {
    $min: null;
    @each $number in $numbers {
        @if $min == null or $number < $min {
            $min: $number;
        }
    }
    @return $min;
}

.micro {
    width: min(50px, 30px, 100px);
}

So in this tutorial we learned about SASS functions along with covering various different examples where we passed arguments, arguments with default values, arbitrary number of arguments.