Uso delle variabili SASS all'interno dell'n-child?

Question

Ho una griglia di immagini in miniatura, attualmente 4 pollici per fila. Per fare in modo che allineare ho questo frammento di codice:

li:nth-child(5) { margin-left: 0;} 

Quello che ho cercato di fare è questo, ma sto ottenendo un errore di sintassi:

$galleryGrid: 5; 
    li:nth-child($galleryGrid) { margin-left: 0;} 

Se volessi modificare l'all'ennesima -child per usare un altro valore, come 10 (quindi posso avere 8 pollici di fila), ho pensato che avrebbe funzionato. Non è possibile o sto solo scorrettamente ?!

Grazie in anticipo per l'aiuto.

Answer 1

È necessario utilizzare l'interpolazione variabile per consentire all'nth-child di essere una variabile.

$galleryGrid: 5; 
li:nth-child(#{$galleryGrid}) { margin-left: 0;} 

Genera

li:nth-child(5){margin-left:0} 

Questa marcatura va bene se si ha il controllo assoluto sopra le immagini e il layout per garantire che gli elementi avvolgono sempre in modo tale che ogni 5 si comincia una nuova riga. Se non è possibile fornire tali garanzie, l'impostazione di margini negativi sull'elemento padre è un modo migliore per procedere.