css przyrost atrybut nth-child wartości

Question

Czy istnieje sposób, aby zwiększyć wartości atrybutów stosując n w nth-child(n) do wyjścia wynik:

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

mogłeś jeśli używasz preprocessor jak sass.

Przykład:

div { 
    $var: 5; 

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

Demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a

Innym sposobem osiągnięcia tego celu:

div { 

    $list: 1 2 3 4 5; 

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

Demo: https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99