Как назначить цветовые значения неизвестному количеству элементов? - PullRequest
Новая
       12

Как назначить цветовые значения неизвестному количеству элементов?

0 голосов
/ 16 октября 2019

У меня есть 7 значений цвета, и я хочу установить их как цвет фона для неизвестного количества div элементов. Я использую Sass, но не могу понять, как это сделать. По сути, я хочу просмотреть эти значения цвета одно за другим и присвоить их div, если цветов больше div, тогда я продолжу с первым цветом, пока у меня не останется div с.

Есть идеи? Я совершенно новичок в Sass, и чтение документации мне не помогло, хотя, наверное, мне придется использовать функцию и цикл.

1 Ответ

1 голос
/ 16 октября 2019

Это можно сделать, сначала создав переменную со списком желаемых цветов внутри;а затем сделать цикл, чтобы пройти через каждый цвет и установить его в качестве фонового изображения. Это будет проходить через каждый цвет один за другим, а затем начнется снова с первого цвета, если это необходимо. 

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

...