I'm wanting every build to change the css of my application in a random way.
Example:
$menu-color: #0097a7; // retonar apenas uma cor
$menu-color: random(#0097a7,#FAFAFA,#7FB800); // retorna uma color aleatoria.
As random returns only a random number this would not be the solution, how could I solve it?
A very simple way is to use rgb() instead of #hex :
$red: random(256)-1;
$green: random(256)-1;
$blue: random(256)-1;
And then:
color: rgb($red, $green, $blue);
Or
background-color: rgba($red, $green, $blue);
So you have the chance to "gauge" the tones generated by measuring the RGB (red, green, blue) with different values if desired.
The funny thing is that SASS converts to #hex and / or predefined colors at the end. This blog gives you some ideas on how to get around this if you want to exit using rgb() literally.
Complementing the @Bacco answer with your comment question. You can get the network , green and blue as follows:
$hex: #FAFEF0;
red($hex); // 250
green($hex); // 254
blue($hex); // 240
The complete example:
$red: random(256) - 1;
$green: random(256) - 1;
$blue: random(256) - 1;
$hex: rgb($red, $green, $blue);
.color {
color: $hex; /* Cor gerada randomicamente */
background-color: rgba(red($hex), green($hex), blue($hex), .7);
}
I would get something similar to:
.color {
color: #db7d39; /* Cor gerada randomicamente */
background-color: rgba(219, 125, 57, 0.7);
}