Мой s css файл не проходит правильно, вы можете сказать, почему?

Question

Мой анимированный фон не работает, и я не уверен, почему. Я взял код из этой кодовой ручки: https://codepen.io/Mamboleoo/pen/BxMQYQ. Это работает на codepen, но в моей виртуальной среде это не так. Я также использую Flask.

Вот дом. html Я пытаюсь загрузить:

{% extends 'base.html' %}

{% block title %}
<link rel="stylesheet" href="{{ url_for('static', filename='scss/background.scss') }}">
<title>Home</title>
{% endblock %}


{% block body %}
<div class="background">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
{% endblock %}

И мой S CSS (хранится в static / scss / background.s css:

    body {
    margin: 0;
    overflow: hidden;
  }

  .background {
    width: 100vw;
    height: 100vh;
    background: #3E1E68;
  }

  $particleSize: 20vmin;
  $animationDuration: 6s;
  $amount: 20;
  .background span {
    width: $particleSize;
    height: $particleSize;
    border-radius: $particleSize;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-duration: $animationDuration;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    $colors: (
      #583C87,
      #E45A84,
      #FFACAC
    );
    @for $i from 1 through $amount {
      &:nth-child(#{$i}) {
        color: nth($colors, random(length($colors)));
        top: random(100) * 1%;
        left: random(100) * 1%;
        animation-duration: (random($animationDuration * 10) / 10) * 1s + 10s;
        animation-delay: random(($animationDuration + 10s) * 10) / 10 * -1s;
        transform-origin: (random(50) - 25) * 1vw (random(50) - 25) * 1vh;
        $blurRadius: (random() + 0.5) * $particleSize * 0.5;
        $x: if(random() > 0.5, -1, 1);
        box-shadow: ($particleSize * 2 * $x) 0 $blurRadius currentColor;
      }
    }
  }

  @keyframes move {
    100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
    }
  }

Все, что я загружаю, это фиолетовый экран, без анимации: /

Answer 1

Вы можете использовать следующие типы онлайн-инструментов, которые помогут вам конвертировать файлы s css в css

Например: https://jsonformatter.org/scss-to-css

Вам необходимо сначала преобразовать свой код s css в css. И затем в соответствующем файле HTML вам нужно вызвать этот файл. css, а НЕ файл s css