Share
In questo articolo, daremo un'occhiata a come usare Sass e Compass nel nostro processo di sviluppo del tema WordPress. Struttureremo i fogli di stile dei temi in SMACSS e sfrutteremo la potenza di Compass per generare sprite di immagini per dispositivi retina e non retina.
Nota che questo articolo non è un'introduzione a Sass; tuttavia, se sei un principiante, sentiti comunque libero di seguirlo.
Prima di saltare, assicurati di aver installato Sass e Compass sulla tua macchina. Se non li hai ancora installati, segui le istruzioni su:
Ci sono poche applicazioni Sass e Compass basate su GUI, ma userò il Terminale (se sei su Windows, puoi usare il Prompt dei comandi). Sentiti libero di usare lo strumento con cui ti trovi più a tuo agio.
Iniziamo creando una cartella per il nostro progetto. Crea una nuova cartella sul desktop e chiamala tutsplus. Al suo interno creano due nuove cartelle: insolenza e immagini. Il insolenza cartella conterrà i nostri file Sass che formeranno il nostro foglio di stile per i temi, il style.css.
Apri il immagini cartella e creare due nuove directory per le nostre icone a tema. Chiama le directory icone e Icone @ 2x. Successivamente, utilizzeremo le immagini in queste cartelle per creare sprite di immagini per il nostro tema. A questo punto la struttura delle cartelle dovrebbe apparire come segue:
La struttura delle cartelleUseremo la bussola per orologio per le modifiche ai file all'interno di insolenza cartella e, quando si verifica una modifica, utilizzerà il Sass per compilare i nostri fogli di stile. Ogni volta che lanciamo Compass, cercherà un file di configurazione nella directory corrente. Questo file è chiamato config.rb.
Per creare il file di configurazione apri il terminale / prompt dei comandi e vai al tuo tutsplus cartella sul desktop:
cd / desktop / tutsplus /
Quindi chiama il bussola config config.rb comando. Questo comando di riempimento genera il file di configurazione per te. Apri il file nel tuo editor di testo preferito e apporta le seguenti modifiche:
Accentsconagua
css_dir = "fogli di stile" a: css_dir = "/". Questo dirà alla bussola di generare i file CSS generati all'interno della nostra cartella radice dei temi, poiché è qui che WordPress cercherà i nostri temi style.css.output_style =: expanded.relative_assets = true e line_comments = false.Salva le tue modifiche. Adesso tuo config.rb il file dovrebbe apparire come quello qui sotto:
# Richiede eventuali plugin bussola aggiuntivi qui. # Impostare questo come root del progetto quando viene distribuito: http_path = "/" css_dir = "/" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # Puoi selezionare qui lo stile di output preferito (può essere ignorato tramite la riga di comando): # output_style =: expanded o: nested o: compact o: compressed output_style =: expanded # Per abilitare i percorsi relativi alle risorse tramite le funzioni di aiuto della bussola. Decommentazione: relative_assets = true # Per disabilitare i commenti di debug che visualizzano la posizione originale dei selettori. Uncomment: line_comments = false # Se preferisci la sintassi indentata, potresti voler rigenerare nuovamente questo progetto # passando --syntax sass, oppure puoi decommentarlo: # preferred_syntax =: sass # e quindi eseguire: # sass-convert -R --da scss --to sass sass scss && rm -rf sass && mv scss sass
Tutto ok! Ora che abbiamo il file di configurazione, è il momento di creare il nostro primo file Sass. Crea un nuovo file all'interno del insolenza cartella e chiamalo style.scss. Successivamente, avvia il tuo terminale e naviga verso / Desktop / tutsplus / elenco.
Esegui il orologio da bussola comando. Questo comando avvierà un processo che cercherà continuamente modifiche ai file Sass all'interno del nostro insolenza cartella. Troverà il nostro style.scss file ed emette la sua rappresentazione CSS come style.css dentro il nostro tutsplus elenco.
Si noti che tutti i file all'interno del nostro insolenza la cartella con cui i nomi non iniziano con il trattino basso verrà elaborata e prodotta in tutsplus cartella. Questo è esattamente ciò che vogliamo per il style.scss file.
Una cosa importante da ricordare: non apportare modifiche dirette all'interno dei file CSS generati, in quanto le tue modifiche andranno perse una volta compilati nuovamente i file Sass.
Stiamo andando a separare il nostro style.scss in piccoli componenti utilizzando le guide di stile definite in SMACSS (Scalable and Modular Architecture for CSS). L'autore di SMACSS è Jonathan Snook e ha pubblicato un libro su questo stesso argomento che ti incoraggio a leggere. Se sei un membro Tuts +, puoi scaricarne una copia da qui.
SMACSS classifica le tue regole CSS in cinque gruppi:
Creiamo una cartella per ciascuna di queste categorie all'interno della nostra insolenza cartella. Usa i seguenti nomi: base, layout, moduli, stati e temi.
La nostra struttura di cartelle SMACSSNel tuo base cartella, inserisci tutti i tuoi fogli di stile conformi alle Regole di stile base di SMACSS. Questi fogli di stile dovrebbero applicare gli stili solo ai selettori di elementi. Questo è anche un buon posto dove mettere il tuo browser resettato CSS.
Compass viene fornito con il reset del browser basato sul foglio di stile di reset di Eric Meyer. Per questo progetto, userò normalize.css. Scarica il normalize.css archiviare e posizionarlo all'interno del base directory, quindi rinominarlo in _normalize.scss. Assicurati di cambiare la sua estensione del file da css a SCSS.
Successivamente, dobbiamo importare il normalizzare foglio di stile nel nostro style.scss. Per fare questo apri il style.scss e aggiungi:
// Base @import "base / normalizza";
Come puoi vedere stiamo omettendo il carattere di sottolineatura nel nome del file e la sua estensione di file. Il preprocessore di Sass è abbastanza intelligente da importare il file che volevamo.
Qui, posiziona gli stili di layout del tema. Ad esempio, questo includerà intestazione, barra laterale, piè di pagina e layout di pagina come _header.scss, _sidebar.scss, _footer.scss e _page.scss.
Puoi usare il l- prefisso per i nomi delle classi di layout:
// _header.scss .l-main-header margin: 30px; imbottitura: 20px; font-size: 16px; // _navigation.scss .l-main-nav position: relativo;
Questo è anche un buon posto per il tuo foglio di stile della griglia. Puoi anche leggere di più sulle regole di layout SMACSS.
I moduli sono elementi di contenuto riutilizzabili. Ad esempio, un post sul blog è un modulo in quanto le sue regole vengono riutilizzate su più istanze dello stesso modulo. Widget, shortcode e icone sono anche un tipo di modulo.
Un modulo può contenere sottomoduli. Ecco un esempio di modulo widget e il suo sottomodulo titolo:
.widget padding: 10px; .widget__title font-size: 15px;
Qui stiamo usando la convenzione di denominazione della classe BEM (Block Element Modifier).
Metti qui i tuoi fogli di stile che controllano l'aspetto dei tuoi elementi a seconda di alcuni stati. Se stai creando un tema reattivo, inserisci qui il tuo foglio di stile per i media.
Creiamo uno adesso.
Crea un nuovo file nel tuo editor di testo e salvalo come _media_queries.scss nel / Sass / stati / cartella. Incolla queste regole di dimensioni dello schermo comuni all'interno del file:
/ *! = Media Queries ----------------------------------------------- --------------- * / / * 956-768px * / @media solo schermo e (larghezza minima: 768 px) e (larghezza massima: 959 px) / * 767- Schermo 480px * / @media e (min-width: 480px) e (max-width: 767px) / * 479px * / @media solo schermo e (larghezza massima: 479 px)
Non dimenticare di importare il nostro foglio di stile appena creato nel nostro style.scss file:
// Base @import "base / normalizza"; // States @import "stati / media_queries"
Se si dispone ad esempio di un menu di navigazione fuori schermo, qui è possibile inserire gli stili che controlleranno l'aspetto durante la navigazione .è aperto o .è chiuso, ma nella maggior parte dei casi li inserirai nel layout o nel file del modulo per la navigazione fuori dalla tela.
Questo è un buon posto per mettere gli stili del tuo plugin WordPress personalizzato. Ad esempio, qui puoi inserire i tuoi stili personalizzati per, ad esempio, il plugin Contact Form 7.
Ogni tema di WordPress style.css il file dovrebbe contenere meta informazioni sul tema come nome del tema, autore, versione e altro. Possiamo sfruttare le variabili di Sass per modificare tali informazioni per ogni tema che creiamo.
Prima crea un nuovo file chiamato _vars.scss e salvarlo all'interno del insolenza cartella. In questo file metteremo tutte le nostre variabili. Se scopri che questo file diventa troppo grande, separalo in file più piccoli.
Apri il file appena creato e inserisci le seguenti variabili:
// Informazioni sul tema // -------------------------------------------- // $ theme_name: "My Theme"; $ theme_uri: "#"; $ theme_description: "My WordPress Theme"; $ theme_version: "1.0"; $ theme_author: "il mio nome"; $ theme_author_uri: "#"; $ theme_license: "GPL"; $ theme_tags: "responsive-layout, post-formats";
Ora dobbiamo creare un file che utilizzi le variabili precedenti. Usando il tuo editor di testo di scelta, crea un nuovo file chiamato _theme_info.scss e salvalo nel insolenza cartella. Riempire il _theme_info.scss con il seguente contenuto:
/ *! Nome tema: # $ theme_name URI del tema: # $ theme_uri Descrizione: # $ theme_description Versione: # $ theme_version Autore: # $ theme_author Autore URI: # $ theme_author_uri Licenza: # $ theme_license URI di licenza: tag License.txt: # $ theme_tags * /
Il passo finale è quello di importare i nostri file appena creati all'interno del style.scss, importiamo anche i componenti di Compass:
@import "bussola"; @import "vars"; @import "theme_info"; // Base @import "base / normalizza"; // States @import "states / media_queries";
Ora se apri l'elaborato style.css il file conterrà il blocco di commenti di informazioni sul tema di WordPress con i valori delle variabili che hai impostato _vars.scss file.
È buona norma utilizzare classi CSS più piccole e più generiche per lo stile di un elemento piuttosto che utilizzare un selettore troppo specifico. Segui l'ASCIUTTO - Non ripetere te stesso principio. Possiamo creare un foglio di stile per le nostre piccole classi di supporto. Per fare un esempio, definirò alcuni helper per il layout e la tipografia.
Crea un nuovo file chiamato _helpers.scss e salvarlo all'interno del insolenza cartella. Anche in questo caso, come nel caso del file delle variabili, se il file di supporto diventa troppo grande per essere mantenuto, prendi in considerazione la possibilità di dividerlo in file più piccoli.
Apri il file appena creato e incollalo in:
/ *! = Aiutanti ------------------------------------------------ -------------- */ // Disposizione //----------------------------- --------------- // .left float: left; .right float: right; . chiaro chiaro: entrambi; .hide display: none; . hidden opacity: 0; visibilità: nascosta; .clearfix &: before, &: after content: ""; display: tabella; &: after clear: both; .center-block display: block; margine: 0 auto; // Tipografia // -------------------------------------------- // .f-normal font-weight: normal; .f-bold font-weight: bold; .f-italic font-style: italic; .t-strike text-decoration: line-through; .t-overline text-decoration: overline; .t-underline text-decoration: underline; .t-left text-align: left; .t-right text-align: right; .t-center text-align: center;
Come puoi vedere qui stiamo usando f- prefisso per le classi relative ai font e t- per le classi relative al testo. Salva il tuo file e importalo nel style.scss:
@import "bussola"; @import "vars"; @import "theme_info"; // Base @import "base / normalizza"; // Helpers @import "helpers"; // States @import "states / media_queries";
Compass viene fornito con metodi pratici per generare sprite di immagini. Inseriremo le nostre icone nel nostro icone e Icone @ 2x cartelle, dove quest'ultimo conterrà le stesse icone ma con dimensioni doppie per dispositivi con display retina.
Per questo esempio, inserirò due file di icone: checkmark.pnge star.png che puoi trovare nel pacchetto di download associato a questo post.
Le iconePer ogni icona genereremo una classe CSS separata utilizzando una lista Sass con tutti i nomi dei file delle icone. Apri il _vars.scss file e aggiungi il seguente codice:
// Icone // -------------------------------------------- / / // map * .png icon files $ icons_sprite: sprite-map ("icons / *. png"); $ icons_sprite2x: sprite-map ("icons@2x/*.png"); // genera le icone sprite $ sprites_file: sprite-url ($ icons_sprite); $ sprites2x_file: sprties-url ($ icons_sprite2x); $ sprites_url: url ("images /" + sprite-path ($ icons_sprite)); $ sprites2x_url: url ("images /" + sprite-path ($ icons_sprite2x)); // elenca i nomi dei file delle icone dei temi (trovati in icone e icone @ 2x cartelle) $ theme_icons: ("segno di spunta", "stella");La bussola troverà tutto il * .png file di immagine all'interno delle nostre cartelle di icone e genererà due sprite di immagini nella immagini cartella. Ora vogliamo generare classi CSS per quelle immagini.
Per trovare la posizione dell'icona all'interno dell'immagine sprite, creeremo due mixin helper. Per fare ciò, crea un nuovo file e chiamalo _mixins.scss quindi aprilo e incolla il seguente codice:
// Icone // -------------------------------------------- / / @mixin sprite_icon ($ name, $ sprite) @include sprite-dimensions ($ sprite, $ name); background-position: sprite-position ($ sprite, $ name); @mixin retina_sprite_icon ($ name, $ sprite) $ pos: sprite-position ($ sprite, $ name); background-position: nth ($ pos, 1) nth ($ pos, 2) / 2; @include background-size (ceil (image-width (sprite-path ($ sprite)) / 2) auto);
Entrambi i mixin accettano come argomento un nome di icona più una mappa di sprite. Questi mixin imposteranno la larghezza, l'altezza e la posizione dello sfondo per l'icona all'interno dello sprite dell'immagine generata. Il retina_sprite_icon imposterà anche le dimensioni dello sfondo appropriate per le icone retina.
Ora è il momento di generare le nostre classi di icone. Crea un nuovo file chiamato _icons.scss e salvarlo all'interno del / Sass / moduli / cartella. Successivamente, incolla all'interno del seguente contenuto:
/ *! = Icone ------------------------------------------------ -------------- * / @if (lunghezza ($ theme_icons)> 0) .icon display: inline-block; background: $ sprites_url no-repeat; @each $ icon in $ theme_icons . # "icon--" + $ icon @include sprite_icon ($ icon, $ icons_sprite); @media solo schermo e (-webkit-min-device-pixel-ratio: 2), solo schermo e (min-moz-device-pixel-ratio: 2), solo schermo e (-o-min-device -pixel-ratio: 2/1), solo schermo e (rapporto min-device-pixel: 2), solo schermo e (risoluzione minima: 192dpi), solo schermo e (risoluzione minima: 2dppx) .icon background: $ sprites2x_url; @each $ icon in $ theme_icons . # "icon--" + $ icon @include retina_sprite_icon ($ icon, $ icons_sprite2x);
Qui, stiamo scorrendo la nostra lista di nomi di icone che è identificata da $ theme_icons e generare regole di retina e non retina usando le nostre icone mix. Da lì, generiamo una classe chiamata .icona questo sarà il modulo di base per le nostre icone e quindi le classi dei modificatori di modulo per ciascuna icona nell'elenco.
In questo esempio, genererà il .icona - segno di spunta e .Icona - stella classi. Ecco un esempio dell'utilizzo dell'icona a forma di stella:
Infine, importiamo il nostro modulo mixin e icone all'interno del style.scss file:
@import "bussola"; @import "vars"; @import "mixins"; @import "theme_info"; // Base @import "base / normalizza"; // Helpers @import "helpers"; // Moduli @import "moduli / icone"; // States @import "states / media_queries";
Sass e Compass sono entrambe potenti utility e possono fare molto per migliorare lo sviluppo del tuo tema WordPress e lo sviluppo di plugin per WordPress. Questa guida mira a metterti sulla strada per creare un processo più raffinato per lavorare con WordPress.
Per coloro che sono curiosi e vogliono leggere di più su alcune delle informazioni trattate in questo tutorial, si prega di rivedere i seguenti articoli:
