React build fails when sass uses calc and var together

Question

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.

I'm not familiar with sass, but shouldn't there be spaces around the operators inside calc ? — Rainbow, Jun 25 '19 at 00:14
There is an [issue for this on create-react-app's GitHub](https://github.com/facebook/create-react-app/issues/10880). — totymedli, Aug 25 '21 at 11:46

score 2 · Accepted Answer · answered Jul 01 '19 at 06:40

2

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%));

answered Jul 01 '19 at 06:40

Muljayan

3,588
10
30
54

1

Also, make sure you don't minify out the spaces. We got this error because [Bootstrap's (already minified) CSS](https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css) (which had the spaces) got minified again, removing the important spaces. – totymedli Aug 25 '21 at 12:29

score 0 · Answer 2 · edited Aug 25 '21 at 11:47

0

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.

edited Aug 25 '21 at 11:47

totymedli

29,531
22
131
165

answered Jun 24 '19 at 23:12

froutopoios alex

114
1
3

I am dynamically changing the value of --i using javascript. If i use $ to create variables i wont be able to change it with js right ? – Muljayan Jun 25 '19 at 00:21
1

You can not do that.check these questions [sass variables](https://stackoverflow.com/questions/17787845/how-to-control-sass-variable-with-javascript). and [css values with javascript](https://stackoverflow.com/questions/566203/changing-css-values-with-javascript) – froutopoios alex Jun 25 '19 at 14:14
if you are planning to change css values at a regular basis with react you could take a look to something like [css-modules](https://github.com/css-modules/css-modules) or [styled-components](https://www.styled-components.com/) to see if it fits you better. – froutopoios alex Jun 25 '19 at 14:42

score 0 · Answer 3 · answered Jan 19 '22 at 07:53

0

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

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

answered Jan 19 '22 at 07:53

Ranjith Kumar

681
6
7

React build fails when sass uses calc and var together

3 Answers3