在 nth-child 中使用 SASS 变量？

Question

我有一个缩略图网格设置，目前每行 4 个缩略图。为了确保他们排队，我有这个 sn-p 代码：

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

我尝试过这样做，但出现语法错误：

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

如果我想改变第 n 个孩子以使用另一个值，例如 10（这样我可以连续有 8 个拇指），我认为这会起作用。 这是不可能的还是我做错了？！

提前感谢您的帮助。

Answer 1

你需要使用变量插值来让nth-child成为一个变量。

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

生成

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

如果您对图像和布局有绝对控制权，以确保您的元素始终以每隔 5 个开始一个新行的方式换行，则此标记很好。如果你不能做出这样的保证，在父元素上设置负边距是一个更好的方法。