Sass – abbreviazione di Syntactically Awesome Style Sheets – è un compilatore CSS che semplifica la scrittura di CSS. È una scelta popolare tra gli sviluppatori Angular perché, oltre a ridurre notevolmente la quantità di ridondanza nelle regole CSS, Sass è anche supportato nativamente dalla CLI Angular. In effetti, è una delle tue scelte ogni volta che crei un nuovo progetto:

Nel Associazione di stili CSS agli eventi nelle applicazioni angolari tutorial, abbiamo imparato come impostare le variabili CSS vanilla usando il setProperty() metodo. Puoi pensare all’articolo di oggi come una sorta di pezzo complementare in quanto tratterà come leggere le variabili e usarle nelle tue applicazioni Angular. Per fare ciò, modificheremo l’app demo che abbiamo creato in quel tutorial per recuperare i colori del tema che sono definiti in un Sass .scss file.

Perché usare le variabili Sass?

Sass fornisce molti moduli integrati che forniscono funzioni utili. Ad esempio, il modulo colori contiene molte funzioni utili sia per l’analisi che per la modifica dei colori. Questi includono il alleggerire() e scurire() funzioni, che prendono un colore e lo alterano di una percentuale. Questi sono particolarmente utili per regolare un’ampia gamma di colori del tema in modo coerente. Ecco alcune variabili Sass che memorizzano i risultati del alleggerire() e scurire() funzioni:

$backgroundColor: rgb(82, 172, 240);
$lightBackgroundCcolor: lighten($backgroundColor, 16%);
$hoverColor: blue;
$darkHoverColor: darken($hoverColor, 20%);
$focusBorderColor: darkgray;
$darkFocusBorderColor: darken($focusBorderColor, 40%);

Questi possono essere applicati direttamente agli elementi della pagina direttamente tramite le regole CSS. Tuttavia, ci sono momenti in cui ciò non è possibile, ad esempio quando un componente angolare accetta i colori come @Ingresso parametri, come impiegato nel Guida all’ambito delle variabili CSS in Angular Demo :

<feed-component 
  [background-color]="backgroundColorInput"
  [hover-background-color]="hoverColorInput"
  [focus-border-color]="focusBorderColorInput"
>
</feed-component>

Potresti provare ad approssimare l’effetto delle funzioni Sass in TypeScript, ma i tuoi risultati varieranno in consistenza e quasi sicuramente non corrisponderanno a quelli delle funzioni Sass. La soluzione ideale, quindi, è leggere nei colori Sass e fornirli ai componenti che ne hanno bisogno.

Leggi: Introduzione a TypeScript e alle sue caratteristiche

Lettura delle variabili CSS dal servizio

Il primo passo nella lettura delle variabili Sass che abbiamo dichiarato sopra è memorizzarle nelle variabili CSS standard. Per fare ciò, i valori delle proprietà devono essere scritti all’interno dell’interpolazione:

.color-demo-app {
  --background-color: #{$backgroundColor};
  --light-background-color: #{$lightBackgroundCcolor};
  --hover-color: #{$hoverColor};
  --dark-hover-color: #{$darkHoverColor};
  --focus-border-color: #{$focusBorderColor};
  --dark-focus-border-color: #{$darkFocusBorderColor};
}

È anche una buona idea limitare l’ambito della variabile a un tag esterno delle tue applicazioni in modo da non riversarsi nel contenuto circostante, se la tua applicazione fa parte di una pagina più grande:

<div class="wrapper color-demo-app">
  application content
</div>

I nostri ColorService esporrà un metodo pubblico denominato caricaColori(). Accetterà un array di colori da caricare, insieme a una mappa in cui associare i colori caricati ai loro nomi. I documenti getElementsByClassName() Il metodo otterrà l’elemento ‘color-demo-app’. Poi viene passato a window.getComputedStyle() per recuperare tutti gli stili degli elementi. Ritorna a Dichiarazione di stile CSS che fornisce il getPropertyValue() metodo. Usandolo per recuperare il valore di ogni variabile di colore, possiamo quindi aggiungere sia la proprietà del colore che il valore al colorMap:

import { Injectable } from '@angular/core';

@Injectable()
export class ColorService {
  public loadColors(colors: string[], colorMap: Map<string, string>) {
    // Read the custom property of body section with given name:
    const appElement = document.getElementsByClassName('color-demo-app');
    if (appElement && appElement.length > 0) {
      const appStyles = window.getComputedStyle(appElement[0]);
      colors.forEach((el) => {
        colorMap.set(
          el, 
          appStyles.getPropertyValue(el).replace(' ', '')
        );
      });
    }
  }
}

Utilizzo del ColorService

Nel Componente dell’app, ora non ci resta che chiamare il nostro servizio per ricevere la merce! Mi è venuta l’idea di dividere i nomi dei colori nei colori e negli effetti delle funzioni per applicare le convenzioni di denominazione:

const CSS_PREFIX = "--";
const CSS_SUFFIX = "color";

enum PropertyNames {
  background  = 'background',
  hover="hover",
  focusborder="focus-border"
}

enum ColorOptions {
  standard = '',
  light="light",
  dark     = 'dark'
} 

const COLOR_LIST = [
  `${CSS_PREFIX}${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.light}-${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.focusborder}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.focusborder}-${CSS_SUFFIX}`
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ColorService]
})
export class AppComponent implements OnInit {
  // Expose enums to the template
  public PropertyNames = PropertyNames;
  public ColorOptions = ColorOptions;

  private _colorMap: Map<string, string>

  constructor(private colorService: ColorService) { }
   
}

Un paio di cose da notare sul codice sopra:

• Il ColorService viene dichiarato nell’array dei provider.
• Viene quindi iniettato nel componente come argomento del costruttore. Ciò ci consentirà di farvi riferimento in seguito.

In OnInit, istanziamo il _colorMap variabile che abbiamo creato sopra e passarla al loadColors() di colorService metodo, insieme al ELENCO_COLORI.

ngOnInit(): void { 
  this._colorMap = new Map();
  this.colorService.loadColors(COLOR_LIST, colorMap);
}

Nulla viene restituito da caricaColori() perché, come oggetto, il colorMap è passato per riferimento. Quindi, conserva i suoi dati anche dopo che la funzione è terminata. Se dovessimo fare un console.log() sul colorMap dopo aver invocato caricaColori(), vedremmo che i nostri sei colori sono stati tutti letti:

Conclusione Servizi angolari e lettura di variabili Sass

Esistono altri modi di leggere le variabili Sass dalle applicazioni Angular, ma questo è il metodo che usiamo in my lavoro del giorno. C’è una demo con il codice di oggi attivo stackblitz. In effetti, scoprirai che contiene molto più codice di quello che abbiamo trattato qui oggi. Ne parleremo nel prossimo articolo.