применить анимацию к переменным S CSS

Question

Я использовал переменные s css во всем моем коде, например:

$primary: royalblue;
body {
  background: $primary;
  color: black;
}
.list-item {
  // some code
  span, a {
    background: black;
    color: $primary;
  }
}

сейчас, я хочу создать анимацию для цвета фона тела:

@keyframes bganimation {
  from {
    $primary: royalblue;
  }
  to {
    $primary: tomato;
  }
}

но я знаю, что s css - это язык, который компилируется в css ... есть ли другой способ сделать это? Не могу переписать код, помогите пожалуйста.

Answer 1

Вы должны анимировать свойство background-color, поэтому оно должно быть:

@keyframes bganimation {
  from {
    background-color: $primary;
  }
  to {
    background-color: tomato;
  }
}

Answer 2

Я думаю, вам сначала нужно понять, как на самом деле работают переменные S CSS: при компиляции S CSS в CSS переменные заменяются фактическим текущим значением переменной, поэтому в конце концов не будет любых переменных больше.

При этом ваш блок ключевых кадров будет просто пустым блоком в конце.

Если вы хотите иметь реальные переменные, вам придется использовать фактические CSS переменные

--some-variable: red;

(Обратите внимание, что это не будет работать из коробки в «браузерах», таких как IE)

Есть еще кое-что, что вы должны исправить в своем коде: - Нет набор анимации для любого из элементов (через атрибут animation ) - в блоке ключевых кадров вы должны определить, какой атрибут должен анимироваться и какое значение они должны принимать во время анимации

например:

@keyframes bganimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

Значит, вам придется хотя бы немного переписать код, чтобы он заработал.