使用带有$变量的calc()时出现意外的术语

Question

我使用postcss-precss(模拟大多数Sass功能,但不是数学)与postcss-cssnext相结合(提供最新的原生CSS功能,即我在postcss-precss中缺少的calc()).

通常我会通过插值结合萨斯和calc()$vars有#{}:

$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会开始支持插值变量(因为它无论如何都是一个糟糕的黑客),我宁愿让WebStorm/PhpStorm用calc()和$ vars识别简化语法:

calc($var1 + $var2)

但怎么样？

我不能使用postcss-sass,因为这个加载器的源映射被破坏了.我也不想将.scss更改为.pcss,因为JetBrain的PostCSS插件仍然不支持某些Sass功能(如$ variables或内联注释).

Answer 1

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

calc(#{$a} + 10px)