Introduzione a Sass per i nuovi designer di temi WordPress

Come un nuovo designer di temi WordPress, impareresti rapidamente le difficoltà di mantenere i file CSS lunghi mantenendoli organizzati, scalabili e leggibili. Scoprirai inoltre che molti designer e sviluppatori di front-end consigliano di utilizzare un linguaggio CSS preprocessore come Sass o LESS. Ma quali sono queste cose? e come si inizia con loro? Questo articolo è un'introduzione a Sass per i nuovi designer di temi WordPress. Ti diremo cos'è un preprocessore CSS, perché ne hai bisogno e come installarlo e iniziare a usarli subito.

Cos'è Sass?

Il CSS che usiamo è stato progettato per essere un linguaggio di fogli di stile facile da usare. Tuttavia, il web si è evoluto, così come la necessità dei designer di avere un linguaggio di fogli di stile che permetta loro di fare di più con meno fatica e tempo. I linguaggi del preprocessore CSS, come Sass, ti consentono di utilizzare le funzioni che al momento non sono disponibili nel CSS, come l'utilizzo di variabili, operatori matematici di base, nesting, mixin, ecc..

È molto simile a PHP, che è un linguaggio di preprocessore che esegue uno script sul server e genera un output HTML. Allo stesso modo, Sass pre-processa i file .scss per generare file CSS che possono essere usati dai browser.

Dalla versione 3.8, gli stili di area di amministrazione di WordPress sono stati portati per utilizzare Sass per lo sviluppo. Ci sono molti negozi di temi WordPress e sviluppatori che già utilizzano Sass per accelerare il loro processo di sviluppo.

Iniziare con Sass per lo sviluppo di temi WordPress

La maggior parte dei designer di temi utilizza l'ambiente di sviluppo locale per lavorare sui temi prima di distribuirli in un ambiente di gestione temporanea o in un server live. Poiché Sass è un linguaggio di preprocessore, sarà necessario installarlo nell'ambiente di sviluppo locale.

La prima cosa che devi fare è installare Sass. Può essere usato come strumento da riga di comando, ma ci sono anche alcune belle app GUI disponibili per Sass. Ti consigliamo di utilizzare Koala, che è un'app opensource gratuita disponibile per Mac, Windows e Linux.

Per il bene di questo articolo, è necessario creare un tema vuoto. Basta creare una nuova cartella in / Wp-content / themes /. Puoi chiamarlo "mytheme" o qualsiasi altra cosa tu voglia. All'interno della cartella del tema vuoto, crea un'altra cartella e assegna un nome ai fogli di stile.

Nella cartella dei fogli di stile, devi creare un style.scss file usando un editor di testo come Blocco note.

Ora devi aprire Koala e fare clic sull'icona più per aggiungere un nuovo progetto. Quindi, individuare la directory del tema e aggiungerla come progetto. Noterai che Koala troverà automaticamente il file Sass nella directory dei fogli di stile e lo visualizzerà.

Fai clic con il tasto destro sul tuo file Sass e seleziona Imposta il percorso di uscita opzione. Ora seleziona la radice della tua directory tematica, ad esempio, / Wp-content / themes / MyTheme / e premi invio. Koala ora genererà il file di output CSS nella directory dei temi. Per testare questo è necessario aprire il file Sass style.scss in un editor di testo come Blocco note e aggiungi questo codice:

 $ font: arial, verdana, sans-serif; body font-family: $ fonts;  

Ora è necessario salvare le modifiche e tornare a Koala. Fai clic con il tasto destro sul tuo file Sass e la barra laterale scorrerà a destra. Per compilare il tuo file Sass è sufficiente fare clic sul file 'Compilare' pulsante. Puoi vedere i risultati aprendo il style.css file nella tua directory dei temi, e avrà il CSS elaborato in questo modo:

 body font-family: arial, verdana, sans-serif;  

Si noti che abbiamo definito una variabile $ font nel nostro file Sass. Ora, quando abbiamo bisogno di aggiungere la famiglia di font, non è necessario digitare nuovamente i nomi di tutti i font. Possiamo solo usare $ font.

Quali altri superpoteri Sass porta ai CSS?

Sass è incredibilmente potente, compatibile con le versioni precedenti e super facile da imparare. Come accennato in precedenza è possibile creare variabili, nidificazione, mixin, importazione, parziali, operatori logici e matematici, ecc. Ora vi mostreremo alcuni esempi e potrete provarli sul vostro tema WordPress.

Gestione di più fogli di stile

Un problema comune che dovrai affrontare come progettista di temi WordPress è un grande foglio di stile con molte sezioni. Probabilmente scorrerai su e giù molto per sistemare le cose mentre lavori sul tuo tema. Usando Sass, puoi importare più file nel tuo foglio di stile principale e generare un singolo file CSS per il tuo tema.

Che dire di CSS @import?

Il problema con l'utilizzo di @import nel file CSS è che ogni volta che aggiungi un @import, il tuo file CSS effettua un'altra richiesta HTTP al server. Ciò influisce sul tempo di caricamento della pagina che non va bene per il tuo progetto. D'altra parte, quando usi @import in Sass, includerà i file nel tuo file Sass e li servirà tutti in un singolo file CSS per i browser.

Per sapere come usare @import in Sass, devi prima creare un file reset.scss file nella cartella stylesheets del tuo tema e incollaci questo codice.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenza: nessuna (dominio pubblico) * / html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin: 0; padding: 0; confine: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline;  / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block;  body line-height: 1;  ol, ul list-style: none;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; 

Ora è necessario aprire il file principale style.scss e aggiungere questa riga dove si desidera importare il file di ripristino:

 @import 'reset'; 

Si noti che non è necessario immettere il nome completo del file. Per compilare questo, è necessario aprire Koala e fare nuovamente clic sul pulsante di compilazione. Ora apri il file style.css principale del tuo tema e vedrai il tuo reset css incluso in esso.

Nestin in Sass

A differenza dell'HTML, il CSS non è una lingua nidificata. Sass ti consente di creare file annidati facili da gestire e lavorare. Ad esempio, è possibile nidificare tutti gli elementi per il sezione, sotto il selettore dell'articolo. Come designer di temi WordPress, questo ti consente di lavorare su diverse sezioni e di personalizzare facilmente ogni elemento. Per vedere la nestin in azione, aggiungi questo al tuo style.scss file:

 .entry-content p font-size: 12px; line-height: 150%;  ul line-height: 150%;  a: link, a: visited, a: active text-decoration: none; colore: # ff6633;  

Dopo l'elaborazione, produrrà il seguente CSS:

 .entry-content p font-size: 12px; altezza della linea: 150%;  .entry-content ul line-height: 150%;  .entry-content a: link, .entry-content a: visited, .entry-content a: active text-decoration: none; colore: # ff6633;  

Come designer di temi, creerai aspetto e aspetto diversi per widget, post, menu di navigazione, intestazione, ecc. L'uso di nest in Sass lo rende ben strutturato e non devi scrivere le stesse classi, selettori e identificatori sopra e di nuovo.

Uso di Mixins in Sass

A volte è necessario riutilizzare alcuni CSS attraverso il tuo progetto, anche se le regole di stile saranno le stesse perché le utilizzerai su diversi selettori e classi. È qui che i mix sono utili. Aggiungiamo un mixin al tuo file style.scss:

 @mixin hide-text overflow: hidden; text-trattino: -9000px; blocco di visualizzazione;  

Questo mixin nasconde fondamentalmente del testo dalla visualizzazione. Ecco un esempio di come puoi usare questo mixin per nascondere il testo per il tuo logo:

 .logo background: url ("logo.png"); altezza: 100px; larghezza: 200px; @include hide-text;  

Si noti che è necessario utilizzare @includere aggiungere un mixin. Dopo l'elaborazione genererà il seguente CSS:

 .logo background: url ("logo.png"); altezza: 100 px; larghezza: 200 px; overflow: nascosto; text-indent: -9000px; blocco di visualizzazione;  

I mix sono anche molto utili con i prefissi dei produttori. Quando aggiungi valori di opacità o raggio di confine, usando i mixin puoi risparmiare un sacco di tempo. Guarda questo esempio, dove abbiamo aggiunto un mixin per aggiungere il raggio del bordo.

 @mixin border-radius ($ radius) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; -ms-border-radius: $ radius; -o-border-radius: $ radius; raggio-bordo: raggio $;  .largebutton @include border-radius (10px);  .smallbutton @include border-radius (5px);  

Dopo la compilazione, genererà il seguente CSS:

 .largebutton -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;  .smallbutton -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;  

Speriamo che questo articolo abbia suscitato il tuo interesse per Sass per lo sviluppo del tema WordPress. Molti designer di temi WordPress lo stanno già utilizzando. Alcuni arrivano addirittura a dire che in futuro tutti i CSS verranno elaborati e gli sviluppatori di temi di WordPress dovranno fare il loro gioco. Facci sapere cosa ne pensi di utilizzare un linguaggio CSS preprocessore come Sass per lo sviluppo del tuo tema WordPress lasciando un commento qui sotto.

Risorse addizionali

Sass Lang
La Via Sass