Convertir un code hexadécimal vers HSL et HSLA avec LESS

La gestion des couleurs en CSS peut être grandement simplifiée avec LESS. Plutôt que de vous limiter aux codes hexadécimaux ou RGBA, apprenez à convertir vos couleurs en HSL et HSLA. Ce tutoriel vous présente deux approches pour cette conversion, chacune adaptée à des besoins différents.

L'approche rapide : Les mixins qui appliquent directement le style

Cette méthode est idéale pour les cas d'utilisation simples et directes, où vous n'avez besoin que d'une seule propriété pour votre couleur (généralement color ou background-color). Ces mixins appliquent directement le style au sélecteur CSS.

Le code des mixins directs

// Convertit un HEX en HSL et applique la couleur
.hex-to-hsl(@hex) {
    @less-color: color(@hex);
    @h: hue(@less-color);
    @s: saturation(@less-color);
    @l: lightness(@less-color);
    color: hsl(@h, @s, @l);
}

// Convertit un HEX en HSLA et applique la couleur
.hex-to-hsla(@hex, @opacity: 1) {
    @less-color: color(@hex);
    @h: hue(@less-color);
    @s: saturation(@less-color);
    @l: lightness(@less-color);
    color: hsla(@h, @s, @l, @opacity);
}

Avantages et usage

• Usage : Un seul appel de mixin (.hex-to-hsl(#e74c3c);)

• Rapidité : Très pratique pour une application rapide sans variable intermédiaire.

• Limitation : S'applique par défaut à la propriété color. Si vous souhaitez l'utiliser pour un background-color, vous devrez copier le code et remplacer la propriété.

L'approche flexible : Les mixins qui retournent une valeur

Pour un contrôle total et une réutilisabilité maximale, cette approche est la meilleure. Les mixins ne font que calculer et retourner une valeur de couleur que vous pouvez ensuite assigner à une variable, puis utiliser sur n'importe quelle propriété CSS.

Le code des mixins flexibles

// Mixin qui retourne une valeur HSL
.get-hsl-from-hex(@hex) {
  @less-color: color(@hex);
  @h: hue(@less-color);
  @s: saturation(@less-color);
  @l: lightness(@less-color);
  hsl(@h, @s, @l);
}

// Mixin qui retourne une valeur HSLA
.get-hsla-from-hex(@hex, @opacity: 1) {
  @less-color: color(@hex);
  @h: hue(@less-color);
  @s: saturation(@less-color);
  @l: lightness(@less-color);
  hsla(@h, @s, @l, @opacity);
}

Avantages et usage

• Usage : Nécessite une variable intermédiaire (@ma-couleur: .get-hsl-from-hex(#b87333);)

• Polyvalence : La variable @ma-couleur peut être utilisée sur background-color, border, box-shadow, etc.

• Meilleure pratique : C'est l'approche recommandée pour les projets complexes, car elle évite la duplication de code et rend la gestion des couleurs plus centralisée.

En résumé, l'approche directe est excellente pour une utilisation occasionnelle et rapide. Pour tous vos projets professionnels où la maintenabilité et la flexibilité sont cruciales, les mixins qui retournent une valeur sont la solution à privilégier.