Temi con Sass: un tutorial SCSS
Pubblicato: 2022-03-11Lo sviluppo di fogli di stile con Sass, anche quando si utilizzano le sue funzionalità più basilari, come le proprietà di annidamento o le variabili, fa risparmiare tempo prezioso e semplifica la vita agli sviluppatori front-end. Non sorprende che i preprocessori CSS siano stati ampiamente adottati come metodo de facto per creare stili per siti Web e applicazioni; semplicemente non possiamo più vivere senza di loro.
Quando si tratta di temi ; ovvero, cambiando l'aspetto del tuo sito web mantenendone il layout, le funzionalità di Sass, come i mixin o le funzioni, possono sembrare come prendere un aereo invece di camminare! In questo tutorial SCSS, creeremo un tema minimo e useremo SCSS per dare alla nostra programmazione CSS alcuni superpoteri.
Un approccio di base alla miscelazione
Diciamo che abbiamo il seguente layout:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Ci è stato chiesto di creare più temi per questo. Il tema deve cambiare i colori per tutti i contenitori (incluso il contenitore principale) e il pulsante, e il tema sarà determinato da una classe nel corpo, oppure potrebbe essere anche un contenitore "esterno":
<body class="theme-1">Costruiamo un mixin chiamato "themable" che conterrà la nostra combinazione di colori come parametri.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Quindi usalo per generare i nostri temi:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); A questo punto abbiamo già risparmiato molto tempo, ma ci sono alcuni problemi con questo approccio:
I temi normalmente hanno molte proprietà diverse oltre ai colori. Ad esempio, se volessimo modificare il tema Bootstrap, scrivere un mixin seguendo la “ricetta” precedente sarebbe difficile da mantenere e il codice difficile da leggere. Inoltre, non stiamo davvero seguendo le migliori pratiche di Sass, ad esempio inserendo codici colore esadecimali direttamente nel mixin.
Progetta uno schema di stili con Sass Maps
Con l'aiuto delle mappe, che sono principalmente come array indicizzati di chiavi, possiamo costruire un insieme di stili più semantico e significativo per il nostro tema, che sarà più facile da mantenere e comprendere dai nostri colleghi sviluppatori. Potremmo usare anche le liste , ma personalmente trovo le mappe più adatte a questo scopo. Gli elenchi non hanno chiavi mentre le chiavi sono autoesplicabili.
La mappa per il nostro nuovo approccio sarà una mappa nidificata :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Se volessimo accedere a ciascuna sezione del nostro schema theme-1 e alle sue sottomappe, usiamo la direttiva @each per scorrere ognuna di esse:
@each $section, $map in $theme-1 $section restituirà la chiave della sezione corrente e $map restituirà la mappa nidificata che corrisponde a quella chiave.
Quindi, possiamo accedere alle proprietà di ciascuna mappa, diciamo la proprietà background (bg), usando la funzione map-get :
map-get($map, bg)Infine, combinando il nostro nuovo mixin, basato sulla nostra struttura della mappa, possiamo creare tutti i temi che vogliamo:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Si noti che stiamo anche usando la direttiva @if per differenziare le proprietà per le sezioni che non sono pulsanti.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }In questo modo, possiamo aggiungere diverse proprietà per alcune sezioni per creare proprietà specifiche o anche regole, oppure possiamo distinguere tra una chiave con un singolo valore da un'altra con una mappa nidificata.
Il nostro tema potrebbe anche consistere in molte mappe utilizzate da diversi mixin, applicati in diverse parti del nostro foglio di stile. Tutto dipende dalla complessità del nostro layout di base e, naturalmente, dal nostro approccio personale.
Ulteriore ottimizzazione
Sass offre utili funzioni integrate per farci risparmiare ancora più lavoro; ad esempio, hsl funziona come lighten o darken per calcolare, ad esempio, il colore di un pulsante quando ci si passa sopra.
Possiamo modificare il codice del pulsante per schiarirne lo sfondo quando si passa con il mouse, indipendentemente dal colore di sfondo originale. In questo modo, non dobbiamo aggiungere un altro colore per questo stato.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Inoltre, con l'utilizzo dei moduli Sass, il nostro codice può essere ancora più leggibile e scalabile; ogni mappa tematica può essere contenuta in un modulo e quindi importata nel nostro foglio di stile principale.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Ciò richiederebbe che i moduli siano inseriti nel progetto come:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Se sei interessato a saperne di più sull'uso di Sass per ASCIUGARE il tuo CSS, il collega Toptaler Justin Brazeau e appassionato di Sass discute proprio di questo nel suo brillante articolo Sass Mixins: Keep Your Stylesheets DRY .