sass - 无法阻止 SASS 评估 calc() css 属性的内容

Question

我创建了一份 CRA 的新副本，只是为了确保它不是我代码中自定义的东西，除了一个 sass 文件，我什么都没有，它是以下代码:

.test {
    top: calc((0% - (100% - 1.2em)) - 16%);
}

当我运行开发模式时，该行正确显示，但是，当我运行运行构建时，我得到这个:

.test{
  top:calc(-116% - -1.2em)
}

这绝对不是我想要的。我只希望 calc() 的内容保持完整，而不对其进行评估。我已经研究过，看来我需要使用插值法，但我已经厌倦了，但没有任何运气。到目前为止，这是我尝试过的:

top: #{'calc((0% - (100% - 1.2em)) - 16%)'};
top: calc#{'((0% - (100% - 1.2em)) - 16%)'};
top: calc((#{$zero} - #{$hMinus1}) - #{$sixteen});
top: unquote('#{calc((#{$zero} - (#{$oneH}- #{$onePTwo})) - #{$sixteen})}');

我已经厌倦了各种让它忽略该行的方法，但如您所见，它一直评估为某种形式的 - - 1.2em。

还有其他方法可以实现吗？

Answer 1

在 scss 中，#{""} 会将准确的字符串插入到输出 css 中。

这类似于less中的~""

跨界

顶部:#{"calc((0% - (100% - 1.2em)) - 16%"};

少

顶部:~"calc((0% - (100% - 1.2em)) - 16%");

输出CSS

顶部:计算((0% - (100% - 1.2em)) - 16%)；