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;
}

使用Sass进行动态颜色处理

1 个答案: