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

Question

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

通常我会通过插入 $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 会开始支持插值变量（因为无论如何这都是一个糟糕的 hack），我宁愿让 WebStorm/PhpStorm 识别带有 calc() 和 $vars 的简化语法：

calc($var1 + $var2)

但是怎么做呢？

我不能使用 postcss-sass，因为这个加载器的源映射是broken。我也不想将我的 .scss 更改为 .pcss，因为 JetBrain 的 PostCSS plugin 仍然不支持某些 Sass 功能（如 $variables 或内联 cmets）。

Answer 1

你可以像这样在里面使用变量：

calc(#{$a} + 10px)