css tăng thuộc tính thứ n con đánh giá cao

Question

Có cách nào để tăng giá trị thuộc tính sử dụng n trong nth-child(n) để sản xuất các kết quả của:

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

Bạn có thể nếu bạn sử dụng một preprocessor như sass.

Một ví dụ:

div { 
    $var: 5; 

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

Một bản demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a

Một cách khác để đạt được điều này:

div { 

    $list: 1 2 3 4 5; 

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

Một bản demo: https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99