Javascript 在SCSS中动态地堆叠图像

我想在SCSS中创建以下布局：

由于图像有一个动态数字，它可以是4、5或2个图像，因此我无法硬编码负顶部或

translateY

属性。因此，我需要在SCSS中使用

foreach

循环，以便为这些图像分配不同的顶部。是否可以在SCSS中创建这样的布局，或者我需要使用JS

这就是我目前拥有的，正如您所看到的，我只能移动第二个元素，第三个元素已经需要

translateY（-100%）

.layers\uu img{
位置：相对位置；
排名：0；
}
.layers\uu img:非（：第一个子项）{
转化：translateY（-50%）；
过渡：0.5s轻松过渡；
}

尝试以下方法：

let layers=$（'.layers__img'）；
$。每个（层、功能（键、值）{
风险值百分比=50；
如果（键！=0）{
$（'img'，value）.css（'transform'，'translateY（-'+percent*key+'%'）；
}
});
.layers\uu img{
位置：相对位置；
排名：0；
}
.layers\uu img:非（：第一个子项）{
过渡：0.5s轻松过渡；
}

SASS知道简单的“for”循环，是的-如果这是您的实际问题…（对于其他问题，您首先需要向我们展示一些示例代码，说明您希望如何实现这种布局。）我认为在这种情况下，jquery比SCSS更好，给我看看你的代码。@Ivan我在问题中添加了代码，将翻译转换为负边距可能已经达到了你的目的；但是如果你需要堆叠顺序，最后一个图像在底部，第一个在顶部，你也需要改变元素的z索引，这意味着需要某种循环。（除非您愿意颠倒源代码中元素的顺序，然后使用flexbox order再次颠倒顺序。）