在第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个开始一个新行的方式进行换行.如果你不能做出这样的保证,在父元素上设置负边距是一个更好的方法.