将calc（）与$ variables

Question

我使用postcss-precss（模拟大部分Sass功能，但不是数学）与postcss-cssnext结合使用（提供最新的原生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会开始支持插值变量（因为它无论如何都是非常糟糕的黑客），我宁愿让WebStorm / PhpStorm用calc（）和$来识别简化语法vars ：

calc($var1 + $var2)

但是如何？

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

Answer 1

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

calc(#{$a} + 10px)