Convertir un code hexadécimal en RGBA avec LESS

Ce tutoriel vous montre comment convertir facilement vos codes de couleur hexadécimaux en format RGBA pour gérer l'opacité. Ce mixin est conçu pour être utilisé dans n'importe quel projet LESS, mais il est important de noter qu'il est déjà intégré par défaut dans le fichier colors.less de Magix CMS 3.7.8.

Étape 1 : Le code du mixin

Pour utiliser ce mixin dans un projet en dehors de Magix CMS, vous devez le copier-coller dans votre feuille de style LESS principale ou dans un fichier utilitaire.

// Fonction utilitaire pour convertir un chiffre HEX en décimal
.hex-to-decimal(@hex-char) {
  @decimal-value: 0;
  & when (isstring(@hex-char)) {
    @char-upper: `@{hex-char}.toUpperCase()`;
    @char-val: `parseInt(@{char-upper}, 16)`;
    @decimal-value: @char-val;
  }
}

// Mixin pour convertir HEX en RGBA (méthode 100% native LESS)
.hex-to-rgba(@hex, @opacity: 1) {
  // La fonction native color() convertit directement le code HEX en couleur
  @less-color: color(@hex);

  // On extrait les composants R, G et B de l'objet couleur
  @r: red(@less-color);
  @g: green(@less-color);
  @b: blue(@less-color);

  // On applique le résultat
  background-color: rgba(@r, @g, @b, @opacity);
}

Étape 2 : Utilisation du mixin

Le mixin accepte deux paramètres :

• @hex: Le code de couleur hexadécimal (avec ou sans #).

• @opacity: La valeur d'opacité, de 0 (transparent) à 1 (opaque). Ce paramètre est optionnel et a une valeur par défaut de 1

Exemple 1 : Utilisation avec opacité

Pour définir un arrière-plan semi-transparent, appelez le mixin avec le code de couleur et la valeur d'opacité désirée.

.bouton-transparent {
  .hex-to-rgba(#3498db, 0.7); // 70% d'opacité
}

.bouton-transparent {
  background-color: rgba(52, 152, 219, 0.7);
}

Exemple 2 : Utilisation sans opacité

Si vous ne fournissez pas de valeur d'opacité, le mixin utilisera 1 par défaut, ce qui créera une couleur opaque.

.element-opaque {
  .hex-to-rgba(#e74c3c); 
}

Ce code LESS sera compilé en CSS :

.element-opaque {
  background-color: rgba(231, 76, 60, 1);
}

Étape 3 : Compatibilité avec les formats courts

Le mixin gère intelligemment les formats courts à 3 chiffres (par exemple, #f0c) en les convertissant en formats longs à 6 chiffres (#ff00cc).

.boite-rouge {
  .hex-to-rgba(#f0c, 0.5); // Équivalent à #ff00cc
}

Ce code LESS sera compilé en CSS :

.boite-rouge {
  background-color: rgba(255, 0, 204, 0.5);
}

Ce mixin est un outil polyvalent qui facilite la gestion des couleurs dans vos feuilles de style LESS, qu'elles soient utilisées dans Magix CMS ou dans tout autre projet.