Question

我在当前项目中包含Hologram，我们已经使用SASS（带指南针）。

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

/**
 * Project
 *
 * @ORM\Table(name="project")
 * @Gedmo\SoftDeleteable(fieldName="deletedAt")
 * @ORM\Entity(repositoryClass="Artel\ProfileBundle\Entity\Repository\ProjectRepository")
 * @ExclusionPolicy("all")
 */
class Project
{
/////
/**
 * @var \DateTime $deletedAt
 *
 * @ORM\Column(name="deleted_at", type="datetime", nullable=true)
 * @Type("DateTime")
 * @Expose()
 */
protected $deletedAt;

我正在尝试将全息图文档看起来像这样：

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

这就是我可以使用sass循环（SassMeister link）：

/*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>

*/

问题是，在我写出Hologram将使用的HTML之前，我正在关闭我的评论。所以Hologram只选择了顶部。

有办法做到这一点吗？

Answer 1

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

/*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);
    }
}

全息图与SASS的动态评论

1 个答案: