Cacher is the code snippet organizer for pro developers

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>

// Pretty list animation mixin
=listanim($items,$bgcolor)
  @for $i from 1 through $items
    &:nth-child(#{$i})
      animation: pop .5s .2s * $i 1 forwards
      background: darken($bgcolor,3 * $i)
      
// Animation keyframes      
@keyframes pop
  0%
    opacity: 0
    transform: scale(.5)
  100%
    opacity: 1
    transform: scale(1)



// demo styles    
ul,li
  padding: 0
  margin: 0
ul
  max-width: 40em
  margin: 0 auto
li
  list-style: none
  border-top: .1em solid #fff
  padding: 1em

  /*below is required*/

  opacity: 0
  transform: scale(.5)
  +listanim(10,#66D9EF)//add nº of existing items + bgcolor