Последовательная задержка на Sass для дочерних элементов?

Всем привет! Как с помощью Sass создать из этого более изящное решение для последовательного увеличения transition-delay у дочерних элементов?
Вот, чтобы как в примере ZOE - последовательно показывались иконки соц.сетей. Пример - пункт Zoe
.myClass { &:nth-child(1) { transition: all 1s ease-out 0.5s; } &:nth-child(2) { transition: all 1s ease-out 0.7s; } &:nth-child(3) { transition: all 1s ease-out 0.9s; } &:nth-child(4) { transition: all 1s ease-out 1.1s; } &:nth-child(5) { transition: all 1s ease-out 1.3s; } }

Ответ

В Sass существует директива управления - @for. Её можно использовать для таких задач. (Рабочий пример на Codepen.io).
Sass
//Создаём переменные для управления значениями $items: 4 $transition: 500ms
//Каждому элементу будет прибавлять по 0.060s @for $i from 0 through $items &:nth-child(#{$i + 1}) transition-delay: $transition+(60ms*($i))
Компилированная версия:
* { margin: 0; padding: 0; } .wrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .wrapper:hover .item { transform: translateY(50px); background-color: crimson; } .item { width: 100px; height: 100px; background-color: tomato; transition: 500ms; } .item:nth-child(1) { transition-delay: 500ms; } .item:nth-child(2) { transition-delay: 560ms; } .item:nth-child(3) { transition-delay: 620ms; } .item:nth-child(4) { transition-delay: 680ms; } .item:nth-child(5) { transition-delay: 740ms; }