Couleur aléatoire en @function SCSS
Pour générer une couleur aléatoire en SCSS, nous nous basons sur la fonction native random(), qui sera exécutée trois fois pour le niveau de rouge, de vert, et de bleu.
Attention, contrairement à une @mixin qui ajoute une ou plusieurs propriétés à une élément, une @function SCSS se charge uniquement de renvoyer un résultat.
|
1 2 3 4 5 6 7 |
@function randomColor(){ $red: random(256)-1; $green: random(256)-1; $blue: random(256)-1; @return rgb($red, $green, $blue); } |
Usage
|
1 2 3 |
.random-bg{ background: randomColor(); } |
|
1 2 3 |
.random-color{ color: randomColor(); } |