随机背景颜色使用LESS到多个类元素

时间:2017-03-13 11:32:01

标签: html css less

我在这里看到了不同的代码,尽管更多的代码不能用于我的工作。我有最多5种颜色用作每个面板作为背景,但这些面板取决于通过数据库的条目数。然后,我必须创建(稍类似)foreach的LESS函数,将这些颜色分配给不同的面板。

<div class="column">
 <figure class="panel"> <!-- content goes here --> </figure>
</div>

<div class="column">
 <figure class="panel"> <!-- content goes here --> </figure>
</div>

<div class="column">
 <figure class="panel"> <!-- content goes here --> </figure>
</div>

<div class="column">
 <figure class="panel"> <!-- content goes here --> </figure>
</div>

虽然我的LESS代码是:

.column {
  &:nth-child(1) > .panel { background: @red;; }
  &:nth-child(2) > .panel { background: @yellow; }
  &:nth-child(3) > .panel { background: @blue; }
  &:nth-child(4) > .panel { background: #99bf38; }
  &:nth-child(5) > .panel { background: #6d564b; }
}

所以不是在我的LESS中创建:nth-child()串,而是只有一种正确的方法将它简化为CSS LESS吗?如果有新条目,我必须创建另一个:nth-child()并重复背景颜色。

感谢您的帮助。

0 个答案:

没有答案