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.

@function randomColor(){
	$red: random(256)-1; 
	$green: random(256)-1; 
	$blue: random(256)-1;
	@return rgb($red, $green, $blue);
}

@function randomColor(){

$red: random(256)-1;

$green: random(256)-1;

$blue: random(256)-1;

@return rgb($red, $green, $blue);

}

Usage

.random-bg{
	background: randomColor();
}

.random-bg{

background: randomColor();

}

.random-color{ 
	color: randomColor(); 
}

.random-color{

color: randomColor();

}

Dans le même registre

@font-face en @mixin SCSS

Voici une mixin SCSS, mise au point Jonathan Neal, et disponible sur Github, qui permet d’ajouter rapidement une instruction @font-face. Elle prend comme paramètres le nom d’usage de la police, le chemin vers ses fichiers, la graisse, le style, et les extensions des fichiers à inclure (facultatifs).

Clearfix SCSS avec ou sans overflow hidden

Deux types de clearfix CSS se distinguent par leur manière de gérer les débordements. Cette mixin SCSS vous permet de choisir s’il faut ou non cacher les débordement avec overflow:hidden;

Couleur du placholder d’un input en SCSS

Cette mixin SCSS permet de configurer la couleur du texte mis en attibut placeholder d’un input ou d’un textarea dans vos formulaires.