React build fails when sass uses calc and var together

user_10604378 0
Viewed 2096

I am using create-react-app to build my application and it works without any errors or warnings when i run it on development mode. How ever when i use calc and var together in sass I am getting a build error when i run npm run build on the terminal.

transform: translate(calc((var(--i) -1)*-100%));

When i uncomment the mentioned code the build doesn't fail so i am assuming this is where the problem lies.

This is quite odd because it works perfectly when i run npm start.

The error message is the following. 

yarn run v1.16.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/styles/core.scss
ParserError: Syntax Error at line: 1, column 31


error Command failed with exit code 1.
create-react-app reactjs sass build css
3 Answers

This works when a calc() is included to calculate the substraction and when spaces are include between operators.

transform: translate(calc(calc((var(--i) - 1)) * -100%));
user_106043780

Inside SASS variables are declared with $ instead of var(--i). Also you have to separate numbers from the + operator with a space. instead of -1 you have to write - 1 for instance.

Check the docs about the calc function.

Also, you can check this documentation about numeric operators in SASS.

user_83501830

Use #{$i} instead of var(--i) for sass variables

transform: translate(calc( (#{$i} - 1) * -100% ));
user_83618460
Related