代码之家 › 专栏 › 技术社区 › random_user_name

用作关键帧步长百分比的变量上的网页SCSS错误“uknown word”

sass webpack

random_user_name · 技术社区 · 8 年前

错误Webpack(版本4.0.0)引发:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: Unknown word (740:5)

  738 |   }
  739 | 
> 740 |   #{$pulse-percent} {
      |     ^
  741 |     background-position: $mask-right-end 0;
  742 |   }

相关SCS:

// simplified for this question...
$pulse-percent: .6 / 5 * 100%;

@keyframes pulseBG {
  // other steps...

  // ERROR on this line
  #{$pulse-percent} {
    background-position: $mask-right-end 0;
  }

  // other steps...    
}

我使用的语法来自 this answer .

我尝试了几种语法变体,但没有成功:

// throws "expect ':' after $pulse-percent in assignment statement
$pulse-percent { 

// throws "unknown word"
{$pulse-percent} {

// throws "unknown word"
#{( $variable1 / $variable2 * 100% )} {

我发现谷歌上的其他资源似乎没有解决这个问题,而且/或者似乎过时了。

其他变量正在正确处理。

我尝试使用的任何“插值”语法都失败了。我的SCSS中另一条失败的线路是 animation: #{$pulse-interval} pulseBG 1s linear infinite;

是的,在一个严肃的web应用程序中,这是一个愚蠢的CSS动画。
是的,我可以输入值来解决这个问题。