Share
Il flusso di lavoro dello sviluppatore frontend ha subito grandi cambiamenti negli ultimi anni. Più complessità, requisiti più elevati e progetti più grandi ci spingono verso nuove tecnologie come i preprocessori. Personalmente, adoro il mio flusso di lavoro con il preprocessore e non vorrei perdere Sass per i miei progetti in questi giorni - senza di esso sarei un disastro.
Una situazione in particolare in cui Sass mi ha aiutato è la creazione di un singolo frontend solido che può avere diversi temi - cambiare facilmente i colori, le immagini oi caratteri. Oggi descriverò il mio flusso di lavoro, spero che ne porti via qualcosa di utile.
Ecco la struttura di un progetto di esempio. Puoi usare qualsiasi partiale che ritieni logicamente dovrebbe essere incluso. La chiave è avere una cartella separata per temi e una nuova .SCSS file per ogni tema.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - | - _l-default.scss | - | - _modules / | - | - | - _m-accordions.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | - light .scss | - | - application.scss
Nel application.scss file importi tutti i tuoi partial, ignorando la cartella _themes / a questo punto. Questo costruisce le basi su cui possiamo creare diversi temi.
@charset 'UTF-8'; // 1.Base @import '_base / _config.scss'; // 2.Layouts @import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Moduli @import '_modules / _m-accordions', '_modules / _m-teasers';
La configurazione del tuo progetto è molto importante. Qui le variabili vengono in soccorso, permettendoci di impostare i valori predefiniti, quindi sovrascrivere i valori a livello di tema in seguito. Qui puoi vedere che ho impostato alcune variabili per colori, caratteri e impostazioni dei bordi.
Per maggiori dettagli sulle variabili di denominazione, dai uno sguardo a Suggerimento rapido di Jim Nielsen: Assegna un nome alle tue variabili SASS in modo modulare.
@charset "UTF-8"; // Colors $ black: # 000; $ bianco: #fff; $ rosso: # e2061c; $ gray-light: # c9c8c8; $ grigio: # 838282; $ grigio-scuro: # 333333; $ blu: # 253652; // Corp-Colors $ corp-color: $ blue! Default; $ corp-color-dark: darken ($ corp-color, 15%)! predefinito; $ corp-color-second: $ red! default; $ corp-color-second-dark: darken ($ corp-color-second, 15%)! default; // Font $ base-font-size: 1.8! Default; $ base-font-family: Helvetica, Arial, Sans-Serif! default; $ base-font-color: $ gray-dark! default; // Border $ base-border-radius: 2px! Default; $ round-border-radius: 50%! default; $ base-border-color: $ gray! default;
La chiave di questo stadio è l'uso del !predefinito bandiera dopo le dichiarazioni delle variabili. In questo modo puoi sovrascriverli all'interno del tema .SCSS File; il !predefinito dice efficacemente "Usa questo valore se non è definito altrove".
Molto spesso gli sviluppatori non creano variabili per le immagini, ma scrivono gli URL direttamente all'interno dei selettori. Un approccio che mi piace è rimuovere tutti i percorsi all'interno dei partial e inserirli nel file di configurazione come variabili. Ciò renderà la tua vita più facile e il progetto più gestibile.
// Immagini $ sprite: '... /images/base/sprite.png'! Default; $ colorbox-background: '... /images/base/colorbox-background.png'! default;
Qui puoi vedere alcune variabili di sfondo in azione. Questo è un parziale modulare per una fisarmonica, facendo uso della variabile globale $ sprite ma anche impostando e usando una variabile $ Fisarmonica bgcolor che è specifico per il modulo.
// 1. Config $ accordion-bgcolor: $ gray! Default; // 2. Base .m-accordion padding: 20px; background: $ accordion-bgcolor; .m-accordion__trigger background: url ($ sprite) no-repeat;
Nel file del tema (come ad esempio il _themes / _light-theme / light.scss dalla struttura demo sopra) importare il file application.scss che contiene tutti i moduli, i layout e così via. Questa è la base di tutto; con un tema piazzeremo un secondo livello sopra di esso. Niente di più. Una volta che hai importato application.scss aggiungi le stesse variabili utilizzate in precedenza, ma definisci valori specifici per questo tema.
Usando questa tecnica, se aggiungiamo nuovi moduli alla base del progetto, automaticamente (e in modo innocuo) li compileremo in tutti i nostri temi.
@charset 'UTF-8'; // 1.Overwrite stuff $ corp-color: $ gray; $ corp-color-darken: darken ($ corp-colore, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: darken ($ corp-color-second, 10%); $ base-font-size: 1.6; $ base-font-family: Droid Sans, Georgia, Arial; $ base-border-radius: 0px; $ base-border-color: $ gray-light; // Immagini $ sprite: '... /images/light/sprite.png'; $ colorbox-background: '... /images/light/colorbox-background.png'; $ accordion-bgcolor: $ gray-light; // 2. Importa il tema di base @import '... / ... / application';
L'ultimo passo è compilare il Sass in CSS e ottenere due file diversi per l'uso. Dobbiamo compilare application.scss e il light.scss. Usando la riga di comando useresti qualcosa come:
sass --watch YOUR / PATH / application.scss: YOUR / CSSPATH / application.css YOUR / PATH / _themes / _light-theme / light.scss: YOUR / CSSPATH / light.css
Se si utilizza un'app, come CodeKit o Prepros App, la compilazione sarà un processo più visivo.
includere il light.css file nella parte superiore della pagina e dare un'occhiata al tuo sito web rinnovato.
Come puoi vedere, è utile e semplice avere più file di temi, tutti basati su una solida base. Sentiti libero di fare domande, o di dare un feedback e condividere le tue esperienze con noi nella sezione commenti.
Accentsconagua