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

Question

我使用 postcss-precss (模拟大多数 Sass 功能，但不是数学)结合 postcss-cssnext (提供最新的 native 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 或内联注释)。

Answer 1

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

calc(#{$a} + 10px)