Share
Lo trovo particolarmente interessante quando altri sviluppatori condividono i loro suggerimenti e trucchi sul flusso di lavoro. Può essere molto utile fare un salto nel mondo di sviluppo di qualcun altro e scoprire quali strumenti stanno usando per rendersi la vita più facile.
Bene, oggi vi mostrerò parte del mio flusso di lavoro, in particolare come usare Sass e Compass nello sviluppo di un tema WordPress. Invece di spiegare semplicemente la configurazione e gli strumenti necessari, ho pensato che sarebbe stato meglio iniziare da zero e mostrare esattamente ciò che è necessario per andare avanti nello sviluppo di un tema WordPress che utilizza Sass e Compass.
Spero che questo articolo sia interessante per te e non vedo l'ora di condividere una piccola parte del mio flusso di lavoro con te - ti incoraggio a fare lo stesso.
Dopo molte sperimentazioni, questo è lo strumento migliore per il supporto Sass e Compass multipiattaforma. Questa è un'app solo per la barra dei menu che può compilare i file Sass in CSS (ha anche live-reload). Non è gratuito, ma a $ 10,00 ho trovato più che utile.
Nell'interesse di fornire una soluzione per tutti lettori, indipendentemente dalla piattaforma, questo tutorial fornirà la configurazione per l'app di cui sopra. Esistono naturalmente altre alternative, ma tieni presente che le cose potrebbero richiedere configurazioni leggermente diverse da quelle che vedi qui.
Il _S il tema è un tema senza design che si adatta perfettamente agli sviluppatori. Come affermato sul loro sito web "Sono un tema pensato per l'hacking quindi non usare me come tema principale". - Sembra perfetto per noi. Vai al loro sito web, tema _s, e usa il comando 'Genera' nella loro homepage per scaricare una build personalizzata. Potresti semplicemente scaricare il tema direttamente da GitHub, ma poi dovresti cercare manualmente tutte le istanze di _S all'interno del tema e sostituirli con il proprio prefisso. L'uso di 'Genera' fa automaticamente la parte per te.
Una volta scaricata la build personalizzata, decomprimere la directory del tema in wp-content / themes. Per questo tutorial ho usato il generatore per creare il tema wp-tuts e la struttura della directory dovrebbe ora assomigliare a questa:
Ora puoi andare avanti e attivare il tema dal pannello di amministrazione.
Nella directory radice del tema, verrà chiamata una cartella insolenza. Qui è dove metteremo tutti i nostri .SCSS File. Compass.app quindi guarderà quella directory e compilerà tutto nel singolo style.css file che vive nella radice del tema.
Queste sono le impostazioni che funzioneranno bene con WordPress:
/ * config.rb nella radice del tema. * / css_dir = "/" sass_dir = "sass" output_style =: compresso
Ok, abbiamo il nostro insolenza cartella e il nostro config.rb entrambi seduti alla radice del nostro tema. Ora siamo pronti a fare a pezzi il file CSS del tema e creare singoli file che saranno più facili da costruire / mantenere in futuro.
Uno dei vantaggi dell'utilizzo di qualsiasi preprocessore CSS è la possibilità di suddividere il nostro CSS in molti piccoli file. Ciò aiuta enormemente il nostro flusso di lavoro in quanto possiamo organizzare il nostro codice in blocchi correlati che sono più facili da gestire e gestire. Quindi, invece di avere tutto racchiuso in un gigantesco file CSS, possiamo avere un file separato a cui serve solo reset. Quindi potremmo anche avere un file separato che gestisce solo il file menu, un file per media, ecc. ecc. Possiamo avere tanti .SCSS file come ci piace, e dopo la compilazione saranno tutti compressi in un singolo style.css.
Se guardi il style.css file che viene fornito con il tema che abbiamo scaricato, vedrai che l'autore ha inserito dei commenti per separare il contenuto in sezioni come questa:
/ * = Contenuto ---------------------------------------------- - * / .sticky .hentry margin: 0 0 1.5em;
Useremo questi commenti come guida per suddividere questo foglio di stile in un altro .SCSS File.
All'interno del insolenza directory, creare un file chiamato style.scss - Questo è il file che utilizzeremo per importare tutti gli altri file. Inoltre, questo è l'unico SCSS file che NON sarà preceduto da un carattere di sottolineatura ("_"). Questo dice al nostro compilatore che questo file deve essere convertito in un vero file CSS.
Ora attraversa il style.css file e per ogni sezione commentata, crea un nuovo file nel file insolenza cartella che ha come prefisso un trattino basso e ha l'estensione del file .SCSS. Copia il contenuto di quella sezione nel file appena creato.
Ad esempio, dove vedi questo nel style.css, creeresti un file chiamato _navigation.scss e mettilo nel insolenza cartella:
/ * = Navigazione ---------------------------------------------- - * / .site-content [class * = "navigation"] margin: 0 0 1.5em; overflow: nascosto; [class * = "navigation"] .previous float: left; larghezza: 50%; [class * = "navigation"] .next float: right; allineamento del testo: giusto; larghezza: 50%; / * Si termina con sass / _navigation.scss * /
Dopo aver eseguito l'intero foglio di stile, il tuo insolenza directory dovrebbe ora assomigliare a questo. (notare che style.scss è l'unico file che non ha come prefisso un carattere di sottolineatura, tutto il resto è considerato come a parziale, e non verrà compilato in un file CSS separato.)
Ora che abbiamo messo tutti i CSS in file SCSS separati, ora dobbiamo importarli nel file style.scss file e aggiungere anche le informazioni sul tema.
/ *! Nome del tema: URI del tema wp-tuts: http://underscores.me/ Autore: Underscores.me Autore URI: http://underscores.me/ Descrizione: Descrizione Versione: 1.0 Licenza: URI GNU General Public License License: licenza. Tag txt: * / @import "reset"; @import "global"; @import "menu"; @import "contenuto"; @import "asides"; @import "media"; @import "navigazione"; @import 'commenti'; @import 'widget'; @import 'scroll';
Assicurarsi che questi file siano importati nello stesso ordine in cui il CSS è apparso nel documento originale. Puoi vedere che iniziamo con reset e aggiungi il resto nell'ordine corretto. Devi ancora pensare all'ordine in cui le regole sono definite nel CSS finale!
Importante: Notare anche che il punto esclamativo (
Accentsconagua
!) sulla prima riga. Questo dice al compilatore non per spogliare questo importante commento. Dobbiamo farlo perché prima abbiamo impostato l'opzione output_style =: compresso (nel config.rb file). Ciò significa che tutto lo spazio bianco e i commenti verranno rimossi dalla versione compilata. Questa è una grande cosa e tu vuoi certamente che accada, ma non qui! Se questo commento è stato rimosso dal compilatore, WordPress non riconoscerebbe questo tema. Abbiamo fatto tutto il lavoro manuale, ora è il momento di mettere in gioco l'automazione. Vai avanti ed elimina il style.css file dalla radice del tema in quanto non ne abbiamo più bisogno. Ora, se hai seguito correttamente tutti i passaggi precedenti, dovresti riuscire ad aprirlo Compass.app e scegliere Guarda una cartella. Seleziona la directory principale del tuo tema (nel nostro caso, è il wp-tuts cartella all'interno di wp-content / themes)
Dopo un brevissimo ritardo, dovresti vedere un nuovo style.css file che è stato generato. Aprilo e dovresti vedere una versione minificata. Questa è un'indicazione che tutto ha funzionato come previsto.
A questo punto, abbiamo convertito il CSS di base del tema in blocchi di codice piccoli e gestibili e ora vedremo come utilizzare Compass con il nostro progetto.
Compass è un framework che offre molte potenti funzionalità per semplificarti la vita quando realizzi CSS. Perché stiamo usando Compass.app, possiamo portare la funzionalità fornita da Compass semplicemente importando il modulo richiesto nel nostro style.scss file. Ad esempio, se vuoi i moduli CSS3 di Compass, fai semplicemente questo:
/ * Apporta questa prima importazione, quindi sarà disponibile per tutti i file. * / @import "compass / css3";
È davvero così, ora puoi visitare il sito web di Compass e quando sei pronto per utilizzare una delle sue funzionalità nel tuo progetto, saprai esattamente come farlo.
Ora hai tutto ciò che serve per iniziare a usare Sass e Compass quando crei temi in WordPress. Successivamente, daremo un'occhiata ad un paio di esempi molto semplici su come usarli e mentre questo tutorial è non un'introduzione a Sass e Compass, gli esempi qui sotto dovrebbero aiutare i principianti a riconoscere ulteriormente i vantaggi dell'utilizzo di un pre-processore CSS.
Dato che stiamo sfruttando la potenza di un pre-processore, possiamo essere più efficienti quando scriviamo CSS ed evitiamo di ripeterci. Una delle cose che ho su ogni singolo progetto WordPress è a _vars.scss file dove manterrei tutto ciò che è specifico del progetto nelle variabili. In questo modo, posso fare riferimento ai nomi delle variabili in molti file, e dovrei cambiare qualcosa, dovrei farlo solo in un posto.
/ * Esempio dei tipi di cose che potresti mettere in _vars.scss * / $ brand-color: # 56483B; $ default-padding: 24px;
Per usarli attraverso l'intera collezione di .SCSS file, solo @importare è come qualsiasi altro file in style.scss, ma assicurati che sia il primo o subito dopo reset andrebbe bene anche Una volta importato, usa le variabili in questo modo:
/ * All'interno di qualsiasi file importato DOPO _vars.scss, puoi usare tutte le variabili * / .logo color: $ brand-color
Spesso, molte persone usano solo Compass per le sue abilità di prefisso dei venditori. Cado anch'io in questa categoria e qui c'è un piccolo esempio per mostrare perché:
/ * Senza bussola * / * -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box; / * Con Compass * / * @ include il ridimensionamento della casella (border box);
Spero che questo tutorial sia stato utile per mostrare un flusso di lavoro semplice ma efficace quando si utilizza Sass e Compass in WordPress. I due esempi che ho dato alla fine sono i nozioni di base assolute di usare Sass e Compass e dovresti esaminarli separatamente per sfruttarli appieno.
Detto questo, continuerai a migliorare il tuo flusso di lavoro molto con ciò che hai imparato qui. Usando questi strumenti per suddividere i CSS in file di piccole dimensioni, usando le variabili per ridurre la ripetizione e rimuovendo la necessità di digitare i prefissi dei fornitori, sei sulla buona strada per un migliore flusso di lavoro di sviluppo.
