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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用带有$变量的calc()时出现意外的术语相关的知识,希望对你有一定的参考价值。

我使用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)无法识别这种语法,我得到了这个令人恼火的亮点:

enter image description here

尽管这种语法是正确的。

我不能指望cssnext会开始支持插值变量(因为它无论如何都是一个糟糕的黑客),我宁愿让WebStorm / PhpStorm用calc()和$ vars识别简化语法:

calc($var1 + $var2)

但怎么样?

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

答案

您可以像这样使用变量:

calc(#{$a} + 10px)

以上是关于使用带有$变量的calc()时出现意外的术语的主要内容,如果未能解决你的问题,请参考以下文章

使用条件变量多线程时出现意外行为

当我已经定义了变量时出现意外的令牌错误

卸载drupal 8 commerce时出现意外错误

BISON FLEX。提供输入文件时出现意外输出

将子视图添加到 UICollectionViewCell 时出现意外行为

display_timer_callback:滚动时出现意外状态