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

Posted 2023-03-06

【中文标题】Css calc（）函数不适用于sass文件[重复]

【英文标题】：Css calc() function not working with sass file [duplicate]

【发布时间】：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 已经尝试过了

【参考方案1】：

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

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

您没有（或定义不正确）

SASS variables:

$startWidth 和 $endWidth 带有

higher specificity

的规则将覆盖您的选择器 您已经缓存了旧样式，因此请使用 CTRL + SHIFT + R 清除缓存

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