PostCSS-jeder Loop-Through-Liste

Question

Ich habe "postcss-each" installiert und ich möchte eine ungeordnete Liste durchlaufen und die Übergangsdauer auf jedem Listenelement erhöhen.

Was ist die korrekte Syntax? Geht die Schleife in das Post-CSS und wenn ja wo? Die Schleife läuft nicht, wenn ich sie auch in die Li stelle. Ich habe auch versucht, $ i anstelle von $ (i) ohne Glück zu verwenden.

Mein postcss ist unten:

ul { 
    &.show-list { 
    li { 
     opacity: 1; 
    } 
    } 
    @each $i in li { 
    &:nth-child($(i)) { 
     transition-delay: (0.2s * $(i)); 
    } 
    } 
    li { 
    opacity: 0; 
    } 
} 

Vielen Dank im Voraus!

Answer 1

Leider weiß postcss-each (und PostCSS im Allgemeinen) nichts über Ihr DOM. Und es sollte nicht. Die einzige Lösung können Sie sieht wie folgt verwendet werden:

@each $i in 1, 2, 3, 4, 5 { 
    &:nth-child($(i)) { 
    transition-delay: (0.2s * $(i)); 
    } 
} 

Bitte beachten Sie, dass Sie auch postcss-calc für die Arithmetik verwenden.