Rustam Bainazarov

Это ошибка не SASS, а исключительно CSS из-за того, что вы импортируете медиазапросы до объявления основных стилей, тогда как нужно делать наоборот.

С помощью только CSS — никак в таком виде. CSS не умеет трансформировать форматы цветов. Очевидно, что внутри RGBA должен быть цвет в формате RGB.

Поэтому только так:



Если через SASS, то можно конвертировать HEX в RGB с его помощью а-ля так (лучше отдельную функцию использовать)

Но у меня вопрос! Зачем столько кадров? Анимируйте только именно background-size, просто отдельным свойством, а не в составе background:



Тогда и кода будет в десятки раз меньше.

~ ~ ~ ~ ~

Ну а так, то вот:

@keyframes backwheel {
  @for $i from 100 to 33 {
    #{$i * 1%} {
      background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) #{$i * 1%});
    }
  }
}

Генерирует вот это:

@keyframes backwheel {
  100% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 100%);
  }
  99% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 99%);
  }
  98% {
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.6) 98%);
  }
  /* И так далее */
}

Это конфликт синтаксисов функции SASS и фильтра gr...

Решение на миксине:


Если без миксина:

Переменных должно быть столько, сколько требуется для решения задачи наиболее оптимальным путём.

Если проще, быстрее, прозрачнее и логичнее сделать без переменной — делайте без переменной. Если вы понимаете, что переменная вам всё же нужна — делайте переменную.

Во многих крупных проектах многое на переменных построенно, ибо так можно многое автоматизировать. Например, в том же Bootrstrap почти всё построенно на переменных — это позволяет автоматизировать процесс кастомной сборки.

Например, делал недавно небольшой компонент кнопки — вышло порядка 35 переменных (+6 глобальных), и все они служат своей цели, лишних нет. А сегодня я делал достаточно большой компонент баннеров — там всего 6 переменных вышло (+2 глобальных). И больше не было нужно для поставленной задачи.

Словом, делайте по ситуации и технической потребности.

Вы документацию читаете вообще? :))

@mixin button() {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    background: #54cff0;
    color: #fff;
    border-radius: 50px;
    padding: 15px 30px;
    margin-top: 20px;
    text-transform: uppercase;
}

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.