css - 将calc()与$ variables一起使用时出现意外术语

我将postcss-precss(模拟了大多数Sass功能，但没有模拟数学功能)与postcss-cssnext(提供了最新的 native CSS功能，即calc())结合使用了，我在postcss-precss中缺少该功能。

通常，我将$vars与#{}插值来结合Sass和calc():

$size-width-search-btn: 40px;
.btn--search {
    width: calc(#{$size-width-search-btn} + 5); // is compiled to: width: calc(#{$size-width-search-btn} + 5);
}

但是postcss-precss似乎不支持这种插值-根本不进行处理。好消息是，它没有插值即可工作:

width: calc($size-width-search-btn + 5); // is compiled to: 45px

但后来我的IDE(PhpStorm 2016.3)无法识别此语法，我得到了这个令人讨厌的亮点:



尽管事实上这种语法是正确的。

我不能指望cssnext将开始支持插值的vars(因为无论如何它都是一个糟糕的hack)，我宁愿让WebStorm/PhpStorm借助calc()和$ vars 来识别简化的语法:

calc($var1 + $var2)

但是如何？

我不能使用postcss-sass，因为此加载程序的源映射为broken。我也不想将.scss更改为.pcss，因为JetBrain的PostCSS plugin仍然不支持某些Sass功能(例如$ variables或内联注释)。

最佳答案

您可以像这样使用内部变量:

calc(#{$a} + 10px)

关于css - 将calc()与$ variables一起使用时出现意外术语，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41140731/