Aujourd’hui, j’ai eu une petite situation à résoudre qui m’a bien occupé, et je me suis dit : pourquoi ne pas partager ça ici ?
Comme vous le savez, en tant qu’intégrateur web, on se retrouve souvent à faire un peu de dev front-end, même quand ce n’est pas vraiment notre job. C’est exactement ce qui m’est arrivé aujourd’hui.
Contexte
💻Projet Angular
–> Je devais centraliser des couleurs SCSS dans un projet, mais de façon à pouvoir les gérer facilement depuis TypeScript.
Le but ? Garder tout propre et éviter de répéter les mêmes valeurs partout. Après quelques recherches, voici comment j’ai fait.
Le Problème
J’avais des couleurs définies dans SCSS, et je voulais pouvoir les manipuler dans mon code TypeScript pour les utiliser dynamiquement sans avoir à les recoder partout.
Et comme il n’y avait pas de gestion centralisée des couleurs, j’ai décidé de les mettre dans un fichier TypeScript, et de les injecter dans le CSS de façon automatique.
La Solution
Créer un fichier TypeScript pour stocker les couleurs : Dans le fichier src/cssColors.ts, j’ai créé un objet qui contient toutes mes couleurs :
export const cssColors = { primaryColor: '#64A7D8', secondaryColor: '#9865D9', };
Puis, j’ai utilisé une petite boucle pour injecter ces couleurs en variables CSS globales :
Object.entries(cssColors).forEach(([key, value]) => { document.documentElement.style.setProperty(–${key}, value); });
Utiliser ces variables dans le SCSS : Dans mon fichier SCSS de composant (par exemple src/app/components/my-component/my-component.component.scss), j’ai simplement utilisé les variables CSS :
:host { background: var(--primaryColor); }
Voilà, la couleur primaryColor que j’ai définie dans mon fichier TypeScript est maintenant utilisée dans le SCSS sans effort supplémentaire.
Utiliser les couleurs dans TypeScript :
Enfin, dans mon composant TypeScript (my-component.component.ts), j’ai accès à ces couleurs pour des éléments dynamiques comme les légendes :
import { cssColors } from ‘…/…/…/…/cssColors;
initLegend() { this.legendItems = [{ label: ‘Legende de mon chart, color: cssColors.primaryColor, }]; }` Ainsi, la couleur primaryColor est utilisée dans ma légende dynamique directement depuis le fichier TypeScript.
Pourquoi c’est cool ?
Alors, voilà comment je me suis débrouillé pour centraliser mes variables SCSS tout en les manipulant depuis TypeScript. C’est super pratique pour avoir une gestion centralisée des couleurs, surtout quand elles sont utilisées à plusieurs endroits dans le projet.
En plus, cette méthode permet de ne pas répéter les mêmes valeurs partout, et je peux facilement changer la couleur globale sans devoir toucher à tous les fichiers SCSS.
Et vous, vous avez déjà fait ça dans vos projets ? Des idées pour l’améliorer ou des trucs à éviter ? Dites-moi ce que vous en pensez, je suis curieuse !