Angular prend en charge plusieurs des préprocesseurs CSS les plus populaires, notamment Scss, Sass et Less, via l’Angular CLI (Command Line Interface). Chaque fois que les développeurs Web créent une nouvelle application, la CLI angulaire vous invite à choisir entre CSS vanille et un préprocesseur. Si vous choisissez d’utiliser un préprocesseur, Angular compilera automatiquement en CSS dans le cadre du processus de construction.
Cependant, si vous utilisez Webpack ou un outil de regroupement d’applications similaire, vous devrez installer manuellement les plug-ins et configurer la configuration nécessaire pour faciliter la compilation CSS en fonction du préprocesseur que vous avez choisi. Cela peut rendre l’intégration d’un préprocesseur CSS dans votre application Web un véritable casse-tête. De plus, si vous utilisez des variables qui définissent dynamiquement les valeurs CSS au moment de l’exécution, il peut être judicieux de compiler les styles dans l’application elle-même. Dans ce tutoriel de développement web, nous allons modifier cette application Angular existante pour lire les variables de couleur à partir d’un fichier Less et attribuer les valeurs d’attribut CSS compilées à certaines variables de classe.
Vous pouvez également consulter notre didacticiel de programmation Web sur Manipulation des couleurs avec JavaScript.
Personnalisation des couleurs du thème
Deux bonnes raisons de choisir un préprocesseur CSS comme Less (abréviation de “Leaner Style Sheets”) est sa prise en charge des variables personnalisées et de nombreuses fonctions telles que alléger() et assombrir(). Ces deux caractéristiques nous permettent de définir certaines propriétés de couleur comme celles-ci dans un .moins dossier:
@BackgroundColor: rgb(82, 172, 240); @HoverColor: lighten(@BackgroundColor, 20%); @FocusBorderColor: gray;
Nous pouvons ensuite référencer nos variables à partir de nos règles CSS comme ceci :
.background {
background-color: @BackgroundColor;
}
.hover-background {
background-color: @HoverColor;
}
.focus-border-background {
background-color: @FocusBorderColor;
}
Cela fournit un mécanisme simple pour changer le thème de couleur d’une application en remplaçant un fichier variables.less par un autre.
Les deux extraits de code seront combinés dans les règles CSS suivantes lors de la compilation :
.background {
background-color: #52acf0;
}
.hover-background {
background-color: #b0d9f8;
}
.focus-border-background {
background-color: gray;
}
Notre tuto CSS, Travailler avec des variables CSSexplique plus en détail comment utiliser les variables dans CSS.
Lecture de fichiers d’actifs à partir d’une application angulaire
Par défaut, Angular a un répertoire d’actifs, situé sous le /src dossier à la racine de votre projet, qui est copié dans le répertoire de construction par Angular CLI pendant le processus de construction. C’est là que vous placez toutes les ressources de l’application, qu’il s’agisse d’images, de vidéos et de fichiers .json, de styles ou de scripts. Il est défini sous le «des atouts» rubrique de la angulaire.json dossier:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-theme-changer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
// ...
Vous pouvez également ajouter des instructions pour copier des fichiers à partir d’une bibliothèque commune dans le node_modules dossier si vous devez :
"des atouts": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@acme/common-assets/css/",
"output": "./assets/"
}
We will store our three color variables in the variables.less file, which we will create in the src/assets folder of our project so that we can access them later:
<img loading="lazy" class="alignnone size-full wp-image-11670" src="https://www.htmlgoodies.com/wp-content/uploads/2022/06/angular-assets-folder.jpg" alt="CSS Colors" width="258" height="405" srcset="https://www.htmlgoodies.com/wp-content/uploads/2022/06/angular-assets-folder.jpg 258w, https://www.htmlgoodies.com/wp-content/uploads/2022/06/angular-assets-folder-191x300.jpg 191w" sizes="(max-width: 258px) 100vw, 258px" />
There are a few ways to read files in TypeScript/JavaScript, but I would recommend Angular’s HttpClient class. It is specifically for communicating with a server over the HTTP protocol. To use it, we can import the HttpClient service class from @angular/common/http and inject it as a constructor argument. Its get() method takes two arguments: the endpoint URL from which to fetch, and an options object that is used to configure the request. If web developer do not specify any options, get() expects the response body to contain JSON data. Since that is not the case here, we need to specify a responseType of “text“.
The get() method returns an Observable that we can subscribe to and process the file contents:
import { HttpClient } from '@angular/common/http';
export class AppComponent {
constructor(http: HttpClient) {
http.get('./assets/variables.less', {responseType: 'text'})
.pipe(first())
.subscribe(
variables => {
// Process the variables here...
},
err => {
console.log(err);
});
}
}
Read: HTML, CSS, and JavaScript Tools and Libraries
Converting Less Variables to a JS Object
Rather than try to parse the contents of the variables.less file ourselves, we can utilize less-vars-to-js library to convert our variables to JavaScript (JS). Specifically designed for Less variables, it converts ours to the following JS object:
{
@BackgroundColor: "rgb(82, 172, 240)"
@FocusBorderColor: "gray"
@HoverColor: "lighten(@BackgroundColor, 20%)"
}
It can be invoked directly, without a constructor, as it only does one thing. We just need to pass in the Less variables string within the http.get’s subscribe callback:
import lessToJs from 'less-vars-to-js';
// ...
variables => {
let vars: Object;
try {
vars = lessToJs(variables);
} catch(err) {
console.log(err);
return;
}
Setting the CSS Values from the Less Variables Object
If you look at the generated JS Object, you’ll notice that Less functions like lighten() are not compiled by the lessToJs() function. That’s because less-vars-to-js is just a Less variable parser and not a Less processor. To compile Less functions into actual color values, we need to use the official, stable version of the Less npm JS library. Its methods may be invoked from the command-line, or, as in our case, programmatically. The main entry point into less is the less.render() function, which takes the following formats:
less.render(lessInput[, options]) .then(function(output) { // output.css = string of css // output.map = string of sourcemap // output.imports = array of string filenames of the imports referenced }, function(error) { }) ; // ou... less.render(css, options, function(error, output) {})
Nous utiliserons la première syntaxe.
Bien que les options ne soient pas obligatoires, nous devrons fournir les modifierVars attribut afin d’activer la modification à l’exécution des variables Less. Il accepte un objet JS comme celui-ci :
{ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' }
La lessInput L’argument doit être au format Moins de règles et non de déclarations de variables. La dernière chose que nous voulons faire est de parcourir toutes nos feuilles de style pour trouver des règles qui utilisent les variables de couleur. En fait, ce serait contre-productif, car nous ne nous intéressons qu’aux valeurs de couleur compilées et à rien d’autre. Pour cela, nous pouvons simplement les envelopper dans quelques règles factices :
let dummyCssRules="", i = 0;
for (const [key, value] of Object.entries(vars)) {
dummyCssRules += 'rule' + ++i + ' { color: ' + key + '; }\n';
}
Nous avons maintenant trois règles CSS valides qui intègrent les variables de couleur Less :
rule1 { color: @BackgroundColor; }
rule2 { color: @HoverColor; }
rule3 { color: @FocusBorderColor; }
Le moins rendre() renvoie une Promise avec un Object qui contient, entre autres, la chaîne CSS compilée :
const options = { modifyVars: vars };
less.render(dummyCssRules, options)
.then((cssObject) => {
// set the theme colors...
})
.catch((reason) => console.error(reason));
En rencontrant @HoverColor’s valeur de “éclaircir(@BackgroundColor, 20%)», définit moins volontiers la valeur pour alléger les résultats :
rule1: {color: '#52acf0'}
rule2: {color: '#b0d9f8'}
rule3: {color: 'gray'}
Lis: Introduction à CSS en JS
Affectation des couleurs CSS aux variables de composant
Rappelons que le but de tout cela est d’appeler l’existant du composant d’application setColors() méthode avec les trois valeurs de couleur de thème. Pour ce faire, nous avons encore une conversion à faire si nous voulons accéder aux valeurs des règles CSS. Encore une fois, nous devrions nous fier à une bibliothèque plutôt que d’analyser le CSS nous-mêmes. Un bon convertisseur CSS en JS est disponible chez nul autre qu’American Express (comme dans la carte de crédit). Ils ont quelques dépôts sur GitHub, dont un pour le css vers js bibliothèque. Il prend les règles CSS dans un format de chaîne et les convertit en un objet JS comme celui-ci :
{
rule1: {
color: "#52acf0"
}
rule2: {
color: "#b0d9f8"
}
rule3: {
color: "gray"
}
}
Il ne reste plus qu’à invoquer setColors() avec nos attributs d’objet :
import { convert } from '@americanexpress/css-to-js';
// In the Component constructor...
const compiledCssObject = convert(cssObject.css);
// Set default colors
this.setColors(
compiledCssObject.rule1.color,
compiledCssObject.rule2.color,
compiledCssObject.rule3.color
);
Vous pouvez jeter un œil à la démo pour voir comment tout le code ci-dessus fonctionne ensemble.
Réflexions finales sur les variables CSS
Ce didacticiel de développement Web a présenté quelques bonnes bibliothèques JS pour la conversion entre Less, CSS et JS, que nous avons utilisées à bon escient en définissant des couleurs de thème personnalisées. Comme nous le verrons dans le prochain article, nous pouvons récupérer des feuilles de style Less entières de la même manière, ce qui nous permet de séparer entièrement les styles de thème de notre application.
Lire la suite Tutoriels de développement et de programmation Web CSS.
— to www.htmlgoodies.com