SCSS(Sass) variable vs CSS function

Unsplash

CSS provides some functions such as calc , var etc. If you are using these functions in SCSS and if you are passing the SCSS variable, you will have to be a bit careful because how you use an SCSS variable in the SCSS function is a bit different than how you will use the SCSS variable in the CSS function.

SCSS variable in scss function

In the case of the SCSS variable, in the SCSS function, you can directly use it such as

E.g.

scss

$base: 25px;
@function multiply($x, $multiplier) {
    @return $x * $multiplier;
}
.box {
    width: multiply($base, 10);
}

result (after converting to CSS)

.box {
  width: 250px;
}

SCSS variable in CSS function

What if we use the variable without interpolation

Without interpolation, the result would be

.box {
    width: calc($base * 10); 
}

Here, the width would have an invalid value since the calc function doesn’t know (parse) about the $base.

According to the definition of calc from here