css incremento attributo nth-child Valori

Question

Esiste un modo per incrementare i valori degli attributi utilizzando n in nth-child(n) per l'uscita del risultato di:

div:nth-child(1){ 
    top: -5px; 
} 
div:nth-child(2){ 
    top: -10px; 
} 
div:nth-child(3){ 
    top: -15px; 
} 
div:nth-child(4){ 
    top: -20px; 
} 
div:nth-child(5){ 
    top: -25px; 
} 

Answer 1

Si potrebbe, se si utilizza un preprocessor come sass.

Un esempio:

div { 
    $var: 5; 

    @for $i from 1 through 5 { 
    &:nth-child(#{$i}) { 
     top: -#{$var}px; 
     $var: $var + 5; 
    } 
    } 
} 

Una demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a

Un altro modo per raggiungere questo obiettivo:

div { 

    $list: 1 2 3 4 5; 

    @each $i in $list { 
    &:nth-child(#{$i}) { 
     top: -5px * $i; 
    } 
    } 
} 

Una demo: https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99