css - 将 Sass 用于动态颜色

Question

.brown,.blue,.pink,.orange,.red,.yellow,.green,.navy,.taxes {
display:block;
text-align:center;
font-size:10px;
font-family:Helvetica;
font-weight:700;
background:#000;/*<--- the color of this should be brown, blue, pink etc*/
color:#fff;
width:100%;
}
.brown{
background: brown;
}

目前这是我实现这种效果的方式。我的问题是:实现这种效果的最有效方法是什么？在 SASS 中，我可以做到这一点，但我仍然需要为每种颜色编写 6 个不同的变量，所以不确定这样做是否更有效率。

另请注意，我使用的是类名而不是 ID 名，因为每种颜色都有多个实例，有 2 种棕色、3 种蓝色、3 种粉红色。那么我对类的使用是否正确，因为 id 应该真正用于唯一值？

Answer 1

我不建议以这种方式编写 CSS，但您可以创建一个列表，然后循环遍历它。 例如:

SASS

$colorList:
    "white" #fff,
    "grey" #ccc
;

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

输出CSS

.color-grey {
   background-color: #ccc;
}

.color-white {
   background-color: #fff;
}