3

Estou querendo a cada build mudar o css da minha aplicação de forma randômica.

Exemplo:

$menu-color: #0097a7; // retonar apenas uma cor
$menu-color: random(#0097a7,#FAFAFA,#7FB800); // retorna uma color aleatoria.

Como o random retorna apenas um numero aleatório esta não seria a solução, como eu poderia resolver?

2 Respostas 2

2

Uma maneira bem simples é usar rgb() em vez de #hex:

$red: random(256)-1;
$green: random(256)-1;
$blue: random(256)-1;

E em seguida:

color: rgb($red, $green, $blue);

Ou

background-color: rgba($red, $green, $blue);

Assim você além de ter a aleatoriedade, pode "calibrar" os tons gerados dosando o RGB (vermelho, verde, azul) com valores diferentes se desejar.

O curioso é que o SASS converte pra #hex e/ou cores predefinidas ao final. Este blog dá algumas idéias de como contornar isso caso queira a saída usando rgb() literalmente.

1
  • Eu olhei esse artigo antes, mas achei um pouco complicado, exemplo: como apartir do hexadecimal: #FAFAFA eu vou obter o red,green e blue do rgb? Commented 26/10/2017 às 14:36
1

Complementando a resposta do @Bacco com a dúvida do seu comentário. Você pode obter novamente o red, green e blue da seguinte maneira:

$hex: #FAFEF0;

red($hex); // 250

green($hex); // 254

blue($hex); // 240

O exemplo completo:

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

Obteria algo semelhante á:

.color {
  color: #db7d39; /* Cor gerada randomicamente */
  background-color: rgba(219, 125, 57, 0.7);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .