Css calc（）函数不适用于sass文件[重复]答案

【问题标题】：Css calc() function not working with sass file [duplicate]Css calc（）函数不适用于sass文件[重复]
【发布时间】：2019-01-12 23:35:42
【问题描述】：

问题：

在 sass 文件中正确使用 calc 函数。

案例：

.class1  {
      max-width: calc(100% - #{$endWidth});
      min-width: $startWidth;
      text-overflow: ellipsis;
    }

.class2 {
      max-width: calc(100% - #{$startWidth});
      direction: rtl;
    }

案例：

我在堆栈溢出中验证了几个答案，并且从其中一个问题的答案中激发了我的问题 - Stack Overflow Reference。解决方案不适用于我的场景，
我应该在 sass 中使用 mixin 来让它工作吗？

【问题讨论】：

@A.Sakkeer 你读过这个问题吗？ OP 已经尝试过了

标签： css sass interpolation css-variables

【解决方案1】：

虽然默认情况下 calc() 确实会导致 SASS 文件出现问题，但可以通过使用插值（您使用正确）来避免这种情况。

您的问题的唯一可能解释是：

您没有（或定义不正确）SASS variables:$startWidth 和 $endWidth
带有 higher specificity 的规则将覆盖您的选择器
您已经缓存了旧样式，因此请使用 CTRL + SHIFT + R 清除缓存

Here's an example JSFiddle 展示您上面的代码工作。

【讨论】：