在第 n 个孩子中使用 SASS 变量? [英] Using SASS Variables within nth-child?

问题描述

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

I have a grid set up of thumbnail images, currently 4 thumbs per row. To make sure they line up i have this snippet of code:

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

我尝试做的是这样，但出现语法错误:

What I have tried to do is this but I am getting a syntax error:

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

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

If I wanted to alter the nth-child to use another value, such as 10 (so I can have 8 thumbs in a row), I assumed this would work. Is this not possible or am I just doing incorrectly?!

预先感谢您的帮助.

推荐答案

需要使用变量插值来让 nth-child 成为变量.

You need to use variable interpolation to allow nth-child to be a variable.

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

生成

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

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

This markup is fine if you have absolute control over the images and layout to ensure that your elements always wrap in such a way that every 5th one begins a new row. If you cannot make such guarantees, setting negative margins on the parent element is a better way to go.

这篇关于在第 n 个孩子中使用 SASS 变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！