Sviluppo di fogli di stile con Sass, anche quando si utilizzano le sue funzionalità di base, come le proprietà di nidificazione o le variabili, consente di risparmiare tempo prezioso e rende la vita più facile per gli sviluppatori front-end. Non sorprende che i pre-processori CSS siano stati ampiamente adottati come il modo de facto di creare stili per siti Web e applicazioni; semplicemente non possiamo più vivere senza di loro.,
Quando si tratta di temi; cioè, cambiando l’aspetto del tuo sito web pur mantenendo il suo layout, le caratteristiche di Sass—come mixin o funzioni—possono sentire come prendere un aereo invece di camminare! In questo tutorial SCSS, stiamo andando a creare un tema minimo e utilizzare SCSS per dare la nostra programmazione CSS alcuni superpoteri.
Un approccio Mixin di base
Diciamo che abbiamo il seguente layout:
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, o potrebbe essere anche un contenitore “esterno”:
<body class="theme-1">Costruiamo un mixin chiamato “themable” che conterrà la nostra combinazione di colori come parametri.,
Poi utilizzare 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à salvato un sacco di tempo, ma ci sono alcuni problemi con questo approccio:
Temi normalmente hanno un sacco di diverse proprietà accanto a colori. Ad esempio, se volessimo modificare il tema Bootstrap, scrivere un mixin seguendo la precedente “ricetta” sarebbe difficile da mantenere e il codice difficile da leggere. Inoltre, non stiamo seguendo le best practice 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 chiave, possiamo costruire un insieme più semantico e significativo di stili per il nostro tema, che sarà più facile da mantenere e capire dai nostri colleghi sviluppatori. Potremmo usare anche le liste, ma, personalmente, trovo le mappe più adatte a questo scopo. Le liste non hanno chiavi mentre le chiavi sono auto-spiegabili.,
La mappa per il nostro nuovo approccio sarà nidificata mappa:
Se si volesse accedere ad ogni sezione del nostro schema theme-1 e le sue sotto-mappe, usiamo il tag @each direttiva per il ciclo ciascuno di essi:
@each $section, $map in $theme-1$section restituisce la chiave di sezione corrente e $map restituirà il nidificati mappa che corrisponde al tasto.,
si può accedere alle proprietà di ogni mappa, diciamo che in background (bg) la struttura, utilizzando i tag map-get funzione:
map-get($map, bg)Infine, combinando il nostro nuovo mixin, basato sulla nostra mappa la struttura, si possono creare molti temi, come ci piace:
Nota che ci sono anche utilizzando il @if direttiva 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 proprietà diverse 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, applicate 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 risparmiare ancora più lavoro; ad esempio, le funzioni hsl comelighten odarken per calcolare, ad esempio, il colore di un pulsante quando si passa sopra di esso.
Possiamo modificare il codice del pulsante per alleggerire lo sfondo quando si passa 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’uso di moduli Sass, il nostro codice può essere ancora più leggibile e scalabile; ogni mappa a tema 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 {… … Questo richiederebbe che i moduli siano collocati nel progetto, come:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Se siete interessati a saperne di più sull’utilizzo di Sass per ASCIUGARE i CSS, compagni di Toptaler Justin Brazeau e Sass appassionato discute solo di questo, nel suo brillante articolo Sass Mixins: Tenere i fogli di stile SECCO.