Creare sfumature personalizzate tramite SCSS

di Morgan Pizzini, in HTML5, CSS,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi