Creare sfumature personalizzate tramite SCSS
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.
