当 sass 一起使用 calc 和 var 时，React 构建失败

Question

我正在使用 create-react-app 来构建我的应用程序，当我在开发模式下运行它时，它可以正常工作，没有任何错误或警告。然而，当我在 sass 中一起使用 calc 和 var 时，当我在终端上运行 npm run build 时，我收到构建错误。

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

当我取消注释上述代码时，构建不会失败，所以我假设这就是问题所在。

这很奇怪，因为当我运行 npm start 时它工作得很好。

错误信息如下。

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.

Answer 1

当包含 calc() 来计算减法以及运算符之间包含空格时，此方法有效。

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

Answer 2

内部 SASS 变量是用

$

而不是

var(--i)

声明的。 此外，您还必须用空格将数字与

+

运算符分隔开。例如，您必须写

-1

，而不是

- 1

。

查看有关

calc

函数的文档。

此外，您还可以查看此有关 SASS 中数字运算符的文档。

Answer 3

对于 sass 变量使用 #{$i} 而不是 var(--i)

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

Answer 4

这种语法对我有用。我将负数括在数字符号和大括号中：#{} 边距顶部： calc(var(--element-size) * #{-1}); 不再出现构建错误。