从样式组中选择 CSS 样式答案

【问题标题】：Select css style from group of styles从样式组中选择 CSS 样式
【发布时间】：2014-08-09 08:47:08
【问题描述】：

我正在为我的数据库中的每个条目生成 Div。

<div class='db-green'>Sample Code</div>
<div class='db-blue'>Sample Code</div>
<div class='db-blue'>Sample Code</div>
<div class='db-yellow'>Sample Code</div>

我希望通过在数组中定义颜色来随机选择 Div 类中的颜色。

我希望有一个 Less 或 sass 的解决方案，或者我应该使用 JS 吗？

【问题讨论】：

我想我不明白这个问题。您需要随机选择一种颜色并将其与元素相关联吗？
正在寻找这样的东西吗？ stackoverflow.com/questions/19036175/…
Sass 和 LESS 都是 CSS 预处理器。
是的，类似的东西。这更像是我定义了 3 个类，db-green、db-blue、db-yellow。子样式是相对于这些类完成的。所以我想随机选择这三个班级中的任何一个？我想看看我能不能用 LESS 或 Sass 来做？
你真的希望它是随机的吗？假设您想使用“漂亮”的预定义颜色数组，我会做类似this.

标签： javascript html sass less

【解决方案1】：

有一个类似于你所说的问题的解决方案：randomly display a div class using JQuery

您可以使用 jQuery 为随机的div 元素定义颜色：

var divs = ['.db-green', '.db-blue', '.db-yellow']; // possible divs
var color = ["blue", "yellow", "red"]; // potential colors
var random = Math.floor(Math.random() * divs.length);
var entry = divs[random];
$(entry).css("color", color[0]);

【讨论】：

【解决方案2】：

您可以使用生成随机颜色的 JavaScript 函数：

function getColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    return "#"+ r.toString(16) + g.toString(16) + b.toString(16) ;
}

然后用JS DOM（或JQuery）来改变每个div的CSSbackground-color属性：

var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++) {
    divs.item(i).style.backgroundColor = getColor();
    divs.item(i).innerHTML = getColor();
}

见JSFiddle

UPDATE：您还可以在 Less 中调用类似的方法，使用 backticks 来访问底层 JavaScript 处理器（我不确定这是否适用于非 JavaScript Less 实现，例如 less4j，因为它不是文档化的特性）。这个混音：

.generateColor() { 
    @color: color(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`);
}

将@color 变量设置为随机生成的颜色。然后您可以在选择器块中使用它：

.db-color-1 {
    .generateColor();
    background-color: @color;
}

.db-color-2 {
    .generateColor();
    background-color: @color;
}

.db-color-3 {
    .generateColor();
    background-color: @color;
}

每个班级（希望）都有不同的颜色。

【讨论】：

我是在 PHP 中做的，我希望在 Sass 或更少中做。但这就是想法。谢谢。
我以为你想在客户端做点什么。您可以使用反引号在 Less 中插入 JavaScript。在选择器块中调用此 mixin：.generateColor() { @color: color(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`);}，您可以在 @color 变量中获得随机颜色：.db-green {.generateColor(); background-color: @color;}