увеличение длительности анимации на неизвестное число sass

Хочу увеличить продолжительность анимации на неизвестное число. Это то, что у меня есть:

@for $i from 1 through 10 {
    .rw-words span {
        animation: rotateWord 27s linear infinite 0s;
        &:nth-of-type(#{$i}) {
           animation-delay:$i * 3s;
        }
    }
}

Это работает до 10 элементов, но мне нужно иметь возможность увеличить продолжительность анимации для каждого элемента, но не знаю, сколько элементов будет. Это для сайта WordPress, петляющего через сообщения, может быть 10 или 200.

2 ответа

  1. SASS предварительно компилируется в обычный CSS, который затем загружается и анализируется браузером. Получить количество элементов невозможно, так как на момент компиляции они неизвестны.

  2. Как сказал Андес Андраде, Sass был скомпилирован в pure CSS, и он не имеет понятия о том, сколько элементов вы можете иметь.

    Для меня есть 2 способа сделать это.


    Первый, чтобы сделать «Max animation сценарий» означает, что вы жесткий код в цикле : @for $i from 0 to 500(500 или 200 )

    Но вы можете получить много неиспользуемых css.


    Или вы можете использовать javascript, который, на мой взгляд, является лучшим вариантом.
    Вы посчитаете, сколько у вас есть предметов, и в зависимости от заказа вы измените задержку анимации ( item.style.animationDelay = i * 3 )