Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для transition. Можно вручную задать transition delay для каждого элемента, но если у нас 20 элементов, то это будет не удобно, поэтому применим гораздо более эффективный способ. Используя возможности цикла Sass @for, мы можем динамически выбрать каждый элемент и применять различные свойства. Ниже мы рассмотрим соответствующий код и посмотрим на результат.

HTML

<ul>
    <li>Dashboard</li>
    <li>Favorites</li>
    <li>Profile</li>
    <li>Settings</li>
 </ul>

Простой неупорядоченный список, мы собираемся ориентироваться на элементы <li>.

Mixin

@mixin transition {
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      transition: all .2s #{$i * .1}s ease-in;
    }
  }

Это самая веселая часть! По сути, происходит то, что мы выполняем цикл от 1 до 4 и каждый раз передаем переменную $i в селектор nth-child(). Для каждой итерации цикла мы также присваиваем задержку перехода $i * .1, что дает нам разные значения для каждого дочернего элемента.

SCSS

li {
  @include transition;
}

Здесь мы просто включаем наш миксин в селектор li.

На выходе получим такой CSS:

li:nth-child(1) {
  transition: all 0.2s 0.1s ease-in;
}
li:nth-child(2) {
  transition: all 0.2s 0.2s ease-in;
}
li:nth-child(3) {
  transition: all 0.2s 0.3s ease-in;
}
li:nth-child(4) {
  transition: all 0.2s 0.4s ease-in;
}

Посмотрев на этот вывод, вы получите достаточно четкое представление о том, что на самом деле произошло, когда мы включили миксин.

Работающий пример:

See the Pen Off Canvas Menu by Denis (@deniscreative) on CodePen.