Angular supporta molti dei più popolari preprocessori CSS, inclusi Scss, Sass e Less, tramite Angular CLI (Command Line Interface). Ogni volta che gli sviluppatori web creano una nuova app, Angular CLI ti chiederà di scegliere tra vanilla CSS e un preprocessore. Se scegli di utilizzare un preprocessore, Angular verrà compilato automaticamente in CSS come parte del processo di compilazione.

Tuttavia, se usi Pacchetto Web o uno strumento di raggruppamento di app simile, dovrai installare manualmente i plug-in e impostare la configurazione necessaria per facilitare la compilazione CSS in base al preprocessore scelto. Questo può rendere l’integrazione di un preprocessore CSS nella tua app web una vera seccatura. Inoltre, se utilizzi variabili che impostano dinamicamente i valori CSS in fase di esecuzione, potrebbe avere senso compilare gli stili all’interno dell’app stessa. In questo tutorial di sviluppo web, modificheremo questo app Angular esistente per leggere le variabili di colore da un file Less e assegnare i valori degli attributi CSS compilati ad alcune variabili di classe.

Potresti anche voler dare un’occhiata al nostro tutorial di programmazione web su Manipolazione del colore con JavaScript.

Personalizzazione dei colori del tema

Un paio di buoni motivi per scegliere un preprocessore CSS come Less (abbreviazione di “Leaner Style Sheets”) è il suo supporto per variabili personalizzate e numerose funzioni come alleggerire() e scurire(). Queste due caratteristiche ci permettono di definire alcune proprietà del colore come queste in a .meno file:

@BackgroundColor: rgb(82, 172, 240);
@HoverColor: lighten(@BackgroundColor, 20%);
@FocusBorderColor: gray;

Possiamo quindi fare riferimento alle nostre variabili dalle nostre regole CSS in questo modo:

.background {
  background-color: @BackgroundColor;
}

.hover-background {
  background-color: @HoverColor;
}

.focus-border-background {
  background-color: @FocusBorderColor;
}

Ciò fornisce un semplice meccanismo per modificare il tema del colore di un’app sostituendo un file variabili.less con un altro.

I due frammenti di codice verranno combinati nelle seguenti regole CSS durante la compilazione:

.background {
  background-color: #52acf0;
}
.hover-background {
  background-color: #b0d9f8;
}
.focus-border-background {
  background-color: gray;
}

Il nostro tutorial CSS, Lavorare con le variabili CSSentra più in dettaglio su come utilizzare le variabili nei CSS.

Lettura di file di asset da un’applicazione angolare

Per impostazione predefinita, Angular ha una directory di risorse, situata sotto il file /src cartella al radice del tuo progetto, che viene copiato nella directory build da Angular CLI durante il processo di build. È qui che metti tutte le risorse dell’applicazione, da immagini, video e file .json a stili e script. È definito sotto il “risorse” sezione del angolare.json file:

"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": {
    // ...

Puoi anche aggiungere istruzioni per copiare i file da una libreria comune nel file nodi_moduli cartella se è necessario:

"risorse": [
  "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:

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]). ;  // o... less.render(css, opzioni, funzione(errore, output) {})

Useremo la prima sintassi.

Sebbene le opzioni non siano richieste, dovremo fornire il modificareVars attributo per abilitare la modifica in fase di esecuzione delle variabili Less. Accetta un oggetto JS come il seguente:

{ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' }

Il menoInput l’argomento deve essere nel formato di regole Less e non di dichiarazioni di variabili. L’ultima cosa che vogliamo fare è cercare in tutti i nostri fogli di stile le regole che usano le variabili colore. In effetti, sarebbe controproducente, perché a noi interessano solo i valori cromatici compilati e nient’altro. Per questo, possiamo semplicemente avvolgerli in alcune regole fittizie:

let dummyCssRules="", i = 0;
for (const [key, value] of Object.entries(vars)) {
  dummyCssRules += 'rule' + ++i + ' { color: ' + key + '; }\n';
}

Ora abbiamo tre regole CSS valide che incorporano le variabili Less color:

rule1 { color: @BackgroundColor; }
rule2 { color: @HoverColor; }
rule3 { color: @FocusBorderColor; }

Il meno rendere() restituisce una promessa con un oggetto che contiene, tra le altre cose, la stringa CSS compilata:

const options = { modifyVars: vars };
less.render(dummyCssRules, options)
  .then((cssObject) => {
	// set the theme colors...
  })
  .catch((reason) => console.error(reason));

All’incontro @HoverColor’s valore di “schiarire(@BackgroundColor, 20%)“, Less prontamente imposta il valore per schiarire i risultati:

rule1: {color: '#52acf0'}
rule2: {color: '#b0d9f8'}
rule3: {color: 'gray'}

Leggi: Introduzione a CSS-in-JS

Assegnazione dei colori CSS alle variabili dei componenti

Ricordiamo che l’obiettivo di tutto questo è chiamare esistente il Componente dell’app setColors() metodo con i tre valori di colore del tema. Per fare ciò, abbiamo un’altra conversione da fare se vogliamo accedere ai valori delle regole CSS. Ancora una volta, dovremmo fare affidamento su una libreria piuttosto che analizzare noi stessi il CSS. Un buon convertitore da CSS a JS è disponibile nientemeno che da American Express (come nella carta di credito). Hanno alcuni repository su GitHub, incluso uno per il css-to-js biblioteca. Prende le regole CSS in un formato stringa e le converte in un oggetto JS come questo:

{
  rule1: {
    color: "#52acf0"
  }
  rule2: {
    color: "#b0d9f8"
  }
  rule3: {
    color: "gray"
  }
}

Tutto ciò che resta da fare ora è invocare setColors() con i nostri attributi oggetto:

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
);

Puoi dare un’occhiata alla demo per vedere come tutto il codice sopra funziona insieme.

Considerazioni finali sulle variabili CSS

Questo tutorial di sviluppo web ha presentato alcune buone librerie JS per la conversione tra Less, CSS e JS, che abbiamo messo a frutto impostando alcuni colori del tema personalizzati. Come vedremo nel prossimo articolo, possiamo recuperare interi fogli di stile Less più o meno allo stesso modo, permettendoci di separare completamente gli stili dei temi dalla nostra applicazione.

Leggi di più Tutorial di programmazione e sviluppo web CSS.