Использование переменных в качестве 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)

Это работает, если я просто набираю проценты, поэтому я думаю, что это как-то связано с тем, как я подставляю переменные в

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; }
  }
}