SASS全息图的动态评价

我正在一个当前的项目中，我们已经使用了SASS（带指南针）

我们有项目中使用的颜色列表：

$colors:
    "white" #FFF,
    "black" #000,
    "grey" #A9A9A9;

我试图让我的全息图文档看起来像这样：

/*doc
---
title: Colors
name: Colors
category: Base CSS
---

List of the colors used.

<div class="cube-wrapper">
    <div class="color-cube white"></div>
    <code>$white</code>
</div>

<div class="cube-wrapper">
    <div class="color-cube black"></div>
    <code>$black</code>
</div>

<div class="cube-wrapper">
    <div class="color-cube grey"></div>
    <code>$grey</code>
</div>

*/

这是我使用sass循环（）所能做到的：

问题是，我甚至在编写全息图将使用的HTML之前就结束了我的评论。所以全息图只能捕捉到顶部

---

有办法吗？

您必须检查最后一个索引，然后添加

*/

/*doc
---
 title: Colors
 name: Colors
 category: Base CSS
---

List of the colors used.



@for $i from 1 through length($colors)  {

    <div class="cube-wrapper">
        <div class="color-cube #{nth($i, 1)}"></div>
        <code>$#{nth($i, 1)}</code>
    </div>
   @if length($colors)
    */
}

@each $i in $colors {
    .#{nth($i, 1)} {
        background-color: nth($i, 2);
    }
}

---

这行吗？I get

SyntaxError:“*\”后的CSS无效：应为选择器或at规则，was}

/*doc
---
 title: Colors
 name: Colors
 category: Base CSS
---

List of the colors used.



@for $i from 1 through length($colors)  {

    <div class="cube-wrapper">
        <div class="color-cube #{nth($i, 1)}"></div>
        <code>$#{nth($i, 1)}</code>
    </div>
   @if length($colors)
    */
}

@each $i in $colors {
    .#{nth($i, 1)} {
        background-color: nth($i, 2);
    }
}