imports - ¿Usando variables SASS dentro de nth-child?

sass--watch

Question

Tengo una cuadrícula de imágenes en miniatura, actualmente 4 pulgares por fila. Para asegurarme de que estén alineados tengo este fragmento de código:

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

Lo que he intentado hacer es esto, pero aparece un error de sintaxis:

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

Si quisiera modificar el nth-child para usar otro valor, como 10 (para que pueda tener 8 pulgares seguidos), asumí que esto funcionaría. ¿No es esto posible o estoy haciendo incorrectamente?

Gracias de antemano por su ayuda.

Answer 1

Debe utilizar la interpolación de variables para permitir que nth-child sea una variable.

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

Genera

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

Este marcado está bien si tiene control absoluto sobre las imágenes y el diseño para asegurarse de que sus elementos siempre se ajusten de tal manera que cada 5º comience una nueva fila. Si no puede hacer tales garantías, la mejor manera de hacerlo es establecer márgenes negativos en el elemento padre.