在nth-child中使用SASS变量？

ass CSS

猪猪

2020-03-23

我有一个缩略图图像的网格设置，当前每行4个拇指。为了确保他们排队，我有以下代码片段：

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

我试图做的是这个，但是我收到语法错误：

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

如果我想更改第n个子项以使用另一个值，例如10（因此我可以连续拥有8个大拇指），我认为这是可行的。这是不可能的，还是我做错了？！

在此先感谢您的帮助。

第2669篇《在nth-child中使用SASS变量？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
宝儿Gil 2020.03.23

您需要使用变量插值来允许第n个子变量成为变量。

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

产生

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

如果您可以完全控制图像和布局以确保元素总是以这样的方式包装，即每5个元素开始一个新行，那么此标记就可以了。如果您不能提供此类保证，则在父元素上设置负边距是一种更好的方法。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android