Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Compile SASS @functions with node-sass

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

.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?

>Solution :

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;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading