Question

我有7个颜色值，我想将它们设置为背景数量的div个元素。我正在使用Sass，但不知道该怎么做。基本上，我想要的是逐个遍历这些颜色值并将其分配给div，如果div的颜色多于颜色，那么我将继续使用第一种颜色，直到没有有div个。

有什么想法吗？我是Sass的新手，尽管我可能不得不使用一个函数和一个循环，但通读文档并没有帮助我。

Answer 1

这可以通过首先创建一个变量，并在其中包含所需的颜色列表来完成。然后循环遍历每种颜色并将其设置为背景图像。这将逐一遍历每种颜色，然后在必要时从第一种颜色重新开始。

div {
  width:50px;
  height:50px;
}

$bgColors: red, green, blue;

@for $i from 1 through length($bgColors) {
	div:nth-child(#{length($bgColors)}n+#{$i}) {
		background: nth($bgColors, $i);
	}
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

SASS Solution JSFiddle

如何为未知数量的元素分配颜色值？

1 个答案: