# SCSS(Sass) variable vs CSS function

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