从样式组中选择CSS样式

Question

I am generating Div for each entry in my database.

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

What I desire is to select the color in Div class by random supose by defining the color's inside an array.

I am hoping for a solution with Less or sass or should i use JS ?

Answer 1

There is a solution to a problem similar to the one you called out: randomly display a div class using JQuery

You can use jQuery to define color to random div elements:

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]);

Answer 2

You can use a JavaScript function that generates a random color:

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

And then use JS DOM (or JQuery) to change the CSS background-color attribute of each div :

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

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

See JSFiddle

UPDATE : You can also call a method like that inside Less using backticks to have access to the underlying JavaScript processor (I'm not sure if this will work in the non-JavaScript Less implementations such as less4j, since it's not a documented feature). This mixin:

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

will set the @color variable to a randomly generated color. You can then use it in a selector block:

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

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

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

And each class will have (hopefully) a different color.