Nello scorso script abbiamo parlato di come l'utilizzo di HWB, tramite l'operatore hwb(), ci aiuti enormemente quando stiamo parlando di colore e sue declinazioni. Abbiamo però notato che il codice è abbastanza prolisso, e sappiamo che, più codice dobbiamo scrivere, più sarà alta la possibilità di errore.
Per quanto riguarda il CSS possiamo ridurre la casistica di errore utilizzando un pre-compilatore: scrivendo codice in SCSS, gli strumenti di pre-compilazione faranno sì di convertito in CSS. Il vantaggio di questa tecnologia è la possibilità di definire variabili, funzioni e cicli, che creeranno poi l'output CSS.
Il punto di partenza è la definizione di due array: i colori che vogliamo utilizzare e le sfumature.
$hue-values: 400, 420, 440; $percentages: (75 0, 50 25, 25 50, 0 75, 0 90);
Creiamo una funzione che presi in input 3 valori componga la regola hwb()
@function generate-hwb($hue, $white, $black) { @return hwb($hue, $white, $black); }
A questo punto apriamo l'elemento :root ed iteriamo sugli elementi per comporre le variabili
:root { @each $hue in $hue-values { @each $percentage-pair in $percentages { $white: nth($percentage-pair, 1); $black: nth($percentage-pair, 2); $index: index($percentages, $percentage-pair); $variable-name: unquote('--hwb-swatch-#{$hue}-#{$index}'); #{$variable-name}: generate-hwb($hue, $white, $black); } } } // OUTPUT :root { --hwb-swatch-400-1: hwb(400, 75, 0); --hwb-swatch-400-2: hwb(400, 50, 25); --hwb-swatch-400-3: hwb(400, 25, 50); --hwb-swatch-400-4: hwb(400, 0, 75); [...] }
Ultimiamo creando le classi CSS che potranno essere usate dalla nostra applicazione.
@each $hue in $hue-values { @each $percentage-pair in $percentages { $white: nth($percentage-pair, 1); $black: nth($percentage-pair, 2); $index: index($percentages, $percentage-pair); $variable-name: unquote('--hwb-swatch-#{$hue}-#{$index}'); .shadow-#{$hue}-#{$index} { background: var(#{$variable-name}); } } } // OUTPUT .shadow-400-1 { background: var(--hwb-swatch-400-1); } .shadow-400-2 { background: var(--hwb-swatch-400-2); } .shadow-400-3 { background: var(--hwb-swatch-400-3); } [...]
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.