Digamos que temos vários n-ésimos filhos aos quais queremos aplicar um retardo de transição variado. Isso pode ser feito visando cada elemento individualmente e definindo manualmente o atraso de transição, mas há uma maneira muito mais eficiente. Usando o poder de um @forloop Sass , podemos direcionar dinamicamente cada elemento e aplicar propriedades variáveis. Abaixo, examinaremos o código envolvido e veremos a saída.

O HTML

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

Uma lista simples não ordenada, vamos ter como alvo os <li>elementos.

The Mixin

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

Essa é a parte divertida! Essencialmente, o que está acontecendo é que estamos fazendo um loop de 1 a 4 e, a cada vez, passando nossa $ivariável para o seletor. Para cada iteração do loop, também atribuímos o atraso de transição para nos fornecer efetivamente um valor diferente para cada filho.nth-child()$i * .1

O SCSS

li {
  @include transition;
}

Aqui estamos simplesmente incluindo nosso mixin no liseletor.

A Saída 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;
}

Olhar para esta saída deve lhe dar uma ideia bastante sólida sobre o que realmente aconteceu quando incluímos o mixin.

Clique aqui para ver em ação