Mountains in Austria, Simon Matzinger on Unsplash Mountains in Austria, Simon Matzinger on Unsplash

Créer un dégradé avec une boucle Less

Grâce à des extensions de langage comme Less, les CSS deviennent dynamiques. On va voir ici comment utiliser une boucle pour créer un dégradé.

Cet article a été publié en juin 2014. Il est possible que son contenu soit obsolète.

Le HTML

L'idée est de créer un dégradé en utilisant la propriété CSS background-color des blocs HTML.
Dans une balise <section> on va écrire un nombre suffisant de <div> pour un bon rendu du dégradé. Ici ce sera 15.

<!-- HTML -->
<section>
<div></div>
x 15 ...
</section>

Les propriétés CSS et la boucle Less

Afin que le dégradé occupe toute la page, on applique aux blocs HTML un comportement de tableau.
Pour la boucle, on définit la variable @iterations qui correspond au nombre de <div> et la variable @degrade-color couleur de base de notre dégradé. Ici on choisira une couleur claire car on utilise la fonction Less darken dans la boucle.

La boucle va appliquer une valeur de la propriété background-color à chaque <div>. La valeur est proportionnelle au positionnement de la div en fonction de son parent grâce à la pseudo-classe :nth-child.

// Less
@iterations: 15;
@degrade-color: #fff;

.loop-degrade(@i) when (@i > 0) {
div:nth-child(@{i}) {
@percent: unit(@i*6.5, ~"%");
background-color: darken(@degrade-color, @percent);
}
.loop-degrade((@i - 1));
}
.loop-degrade(@iterations);

Le résultat

Liens