Sass многоразовые ключевые кадры с миксинами и функциями

Question

У меня есть четыре ключевых кадра, которые выглядят очень похоже. Могу ли я сделать один миксин или функцию и использовать ее вместо дублирования моего кода? Ключевые кадры выглядят примерно так:

@keyframes ComputerLogoOuterSquare {
  0% {
    transform: translate(0, 0);
  }

  12% {
    transform: translate(0.5%, 0.5%);
  }

  50% {
    transform: translate(0.5%, 0.5%);
  }

  62% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

Я пробовал mixin, но выдает ошибку:

@mixin logoAnimation($name, $value) {
  @keyframes $name {
  0% {
    transform: translate(0, 0);
  }

  12% {
    transform: translate($value, $value);
  }

  50% {
    transform: translate($value, $value);
  }

  62% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
  }
}

Answer 1

используйте интерполяцию для использования $ name, например

@ keyframes # {$ name}