SASS / SCSS循环遍历同名的每个div，并添加内容：在文本之后

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 post了解详情。

但是你可以使用sass mixin。