sass - 在 nth-child 中使用 SASS 变量？

Question

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

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 个开始一个新行的方式包装，则此标记很好。如果你不能做出这样的保证，在父元素上设置负边距是一个更好的方法。