CSS calc() 函数中的 Sass 变量在 IE 中不起作用答案

【问题标题】：Sass Variable in CSS calc() function not working in IECSS calc() 函数中的 Sass 变量在 IE 中不起作用
【发布时间】：2020-01-06 23:26:39
【问题描述】：

我有一个 calc 函数如下，但它似乎在 IE 中不起作用。

在我的 _spacing.scss 样式表中：

$spacing-unit: 1em
$component-padding: calc(2* #{$spacing-unit});

在 my8 布局 scss 样式表中：

.conainer {
   width: calc(100% - (2 * #{$component-padding}));
   max-width: 75rem;
   margin-left:auto;
   margin-right:auto;
}

编译后它会编译为：

.container {
  calc(100% - 2*calc(2*1em)));
  ...
 }

好像有点奇怪

【问题讨论】：

似乎不支持/正确支持can i use。如果有问题，您应该在询问 SO 之前检查它是否兼容。
$component-padding 变量中有什么内容？什么版本的 IE？
“不工作”是什么意思？
编译后的 CSS 是什么样子的？
FWIW，can i use 并不表明 calc 完全不受支持，但部分受支持。我验证它可以在 IE11 中工作，this codepen post 显示有人在做同样的事情。但是，如果没有更多信息，社区就无法为您提供太多指导。

标签： css sass

【解决方案1】：

您的主要问题是IE doesn't like to parse nested calc functions。这并不是说它不支持它，但您必须从表达式中省略 calc。所以 IE11 不会尊重calc(100% - 2 * calc(2 * 1em)))，但它应该尊重calc(100% - 2 * (2 * 1em)))。

作为次要注意，虽然它不应该成为一个重大问题，但在某些运算符中，calc 表达式中的周围空格很重要。因此，MDN recommends whitespace always be included around operator for consistency.

【讨论】：