Как использовать SCSS/SASS для увеличения задержки анимации для параллельных divs

Я пытаюсь воспроизвести анимацию загрузки плит Windows 8. Кажется, что каждая плитка имеет задержку анимации, которая немного выше, чем ее предшественница. В настоящее время я участвую в этом, используя nth-child неэффективным способом, как вы можете видеть ниже. Кто-нибудь знает способ, которым я могу достичь этого более эффективным образом, который будет обслуживать любое количество div?

DEMO

.results div:nth-child(1) {
  animation-delay: 0.25s;
}
.results div:nth-child(2) {
  animation-delay: 0.5s;
}
.results div:nth-child(3) {
  animation-delay: 0.75s;
}
.results div:nth-child(4) {
  animation-delay: 1s;
}
.results div:nth-child(5) {
  animation-delay: 1.25s;
}
.results div:nth-child(6) {
  animation-delay: 1.5s;
}
.results div:nth-child(7) {
  animation-delay: 1.75s;
}
.results div:nth-child(8) {
  animation-delay: 2s;
}

Ответ 1

Вы можете использовать цикл for в Sass, чтобы сделать это следующим образом:

@for $i from 1 to 10 {
  .results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}

Затем вы можете сделать это для любого количества div, сделав 10 для того, что вам нужно.

Ответ 2

@for $i from 1 through 10 {
  .results div:nth-child(#{$i}) {
    -webkit-animation-delay:(#{$i*0.1s}); 
    animation-delay:(#{$i*0.1s}); 
  }
}

Лучшее решение... Я тестировал и это работает;)