Compile SASS @functions with node-sass

Question

While using node-sass to compile my SASS files to CSS, the SASS functions are not getting compiled. However, no errors are thrown during when I run the command.

My function is defined in a _function.scss partials which is imported on a settings.scss file which in turn gets imported across all of my SASS files.

@function rem($value) {
  $remValue: calc($value / $root) + rem;

  @return $remValue;
}

Using the function

.tabs__trigger {
  height: rem(5);
 }

After compiling the files using node ./node_modules/node-sass/bin/node-sass -o dist/css src/scss the resulting CSS file have

.tabs__trigger {
  height: calc($value / $root)rem;
}

So, is there any flag or configuration to compile SASS functions using node-sass?

Answer 1

You need to interpolate the variables in order for them to compile correctly.

@function rem($value) {
  $remValue: calc(#{$value} / #{$root}) + rem;

  @return $remValue;
}

Assuming you want to create a rem value based of the root you can do the following:

@function rem($value) {
  @return #{$value / $root} + rem;
}