css - 使用 SCSS 变量作为 css 关键帧百分比

Question

@mixin fade($num:1, $fade:1, $visible:2) {

  @keyframes fade {
    0%   { opacity: 0; }
    #{ $a }%   { opacity: 1; }
    #{$a * ($fade + $visible)}%  { opacity: 1; }
    #{$a * ($fade + $visible + $fade)}%  { opacity: 0; }
    100% { opacity: 0; }
  }
}

我收到错误} expectedscss(css-rcurlyexpected)

如果我只输入百分比，它就可以工作，所以我认为这与我如何替换变量有关

标签： csssassscss-mixins

Answer 1

您将数字转换为不正确的百分比。

@mixin fade($num:1, $fade:1, $visible:2) {

  @keyframes fade {
    0%   { opacity: 0; }
    #{($num)}%   { opacity: 1; }
    #{($num * ($fade + $visible))}%  { opacity: 1; }
    #{($num * ($fade + $visible + $fade))}%  { opacity: 0; }
    100% { opacity: 0; }
  }
}