在第n个孩子中使用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个开始一个新行的方式进行换行。如果你不能做出这样的保证，那么在父元素上设置负边距是一种更好的方法。