loops - SASS/SCSS 循环遍历每个同名的 div，并添加 content:after text

Question

是否可以在 SCSS 中循环一系列说三个 div，例如：

<div class="video_holder">
   <div class="video_title"></div>
</div>

<div class="video_holder">
   <div class="video_title"></div>
</div>

<div class="video_holder">
   <div class="video_title"></div>
</div>

并为每个video_title添加一个执行以下操作的属性：

.video_title:after{ content: "number" }

因此，对于每个 div，我们将从 1.1 开始，一直到 1.x（无论需要什么）

根据我发现的其他循环，我似乎无法得到任何工作

Answer 1

这只能用 css 完成，你不需要 sass 循环。您必须使用 css 反增量。

首先将所有 div 包装在另一个 div 中：

<div class="video_counter_reset">
    <div class="video_holder">
       <div class="video_title"></div>
    </div>

    <div class="video_holder">
       <div class="video_title"></div>
    </div>

    <div class="video_holder">
       <div class="video_title"></div>
    </div>
</div>

并使用这个 css：

.video_counter_reset {
    counter-reset: item;
}
.video_holder:after {
    counter-increment: item;
    content: "1." counter(item);
}

阅读这篇Smashing 帖子了解更多详情。

但是你可以使用一个sass mixin 。