Share
Nella prima parte della serie ho dato una rapida panoramica dei popolari preprocessori LESS e SASS. Ho anche coperto i quadri con cui sono solitamente associati.
Nella seconda parte della serie ho fatto un tuffo in profondità in LESS e dettagliato alcune delle sue caratteristiche. Abbiamo coperto variabili, nidificazione e mixin.
In questa parte della serie illustrerò come strutturare logicamente il tuo .Di meno File. Tratterò anche come collegarli tutti usando le importazioni, e infine a coprire rapidamente l'ingrandimento.
Stiamo per creare un tema figlio per il tema Twenty Twelve predefinito. Per quelli di voi che non hanno familiarità con la creazione di temi figlio, l'unica cosa di cui abbiamo bisogno per creare un tema figlio è a style.css file. Per maggiori informazioni, visita il Codice WordPress.
Per prima cosa, vorremmo navigare nella cartella dei temi all'interno di wp-content. Dovresti vedere il twentytwelve cartella all'interno di qui. Stiamo per creare una nuova cartella e nominarla lessbuilt. Apri quella cartella.
Dentro il nostro nuovo lessbuilt cartella stiamo andando a creare una cartella qui e nominarla css. Apri quella cartella.
All'interno del css cartella, creare un'altra cartella denominata Di meno e poi aprilo pure. All'interno di questa cartella vorremmo creare un nuovo file, style.less. Aprilo.
Per un controllo in loco, assicurati di avere ora il seguente percorso per il tuo style.less file:
wp-content / themes / lessbuilt / css / meno / style.less
Ora che abbiamo il Di meno cartella creata. Aggiungeremo tutti i nostri .Di meno file in questa cartella.
La prima cosa che vorremmo fare nel nostro style.less il file è aggiungere il codice per permetterci di designare che stiamo creando un tema figlio. Si prega di aggiungere il seguente:
Accentsconagua
/ * Nome del tema: URI del tema meno costruito: http://wp.tutsplus.com Descrizione: tema del bambino per il tema Twenty Twelve Autore: Jason Bradley Autore URI: http://everchangingmedia.com Modello: twentytwelve Versione: 0.1.0 * / @import url ("... /twentytwelve/style.css"); Questo è tutto ciò di cui abbiamo bisogno per iniziare. Successivamente, creeremo l'altro .Di meno file e poi legarli tutti insieme di nuovo qui dentro style.less.
Il primo file che sto suggerendo di creare è a variables.less file. Qui è dove andremo a memorizzare tutte le variabili che useremo per il nostro tema figlio. Questo sarà accessibile a tutti i nostri .Di meno file nel nostro Di meno cartella.
Apri il nuovo file e incolla quanto segue:
// variables.less // Colors @white: #fff; @gray: # 666; @ grigio-scuro: # 333; @ gray-light: #eee; @blue: # 4d8b97; @ blu-scuro: # 335c64; // Content @ body-background-color: @gray; @ colore del corpo: @ grigio-luce; @ content-background-color: @ grigio-scuro; // Intestazione @ site-title-color: @white; @ site-title-color-hover: @blue; @ site-description-color: @ gray-light; // Links @ links-color: @blue; @ link-color-hover: @ blu-scuro; // Navigazione @ menu-items-color: @ gray-light; @ menu-items-color-hover: @blue; @ menu-items-color-active: @white; // Post @ entry-title-color: @white; @ border-color: @gray; // Widget @ search-form-background-color: @gray; @ search-form-border-color: @gray; @ search-form-text-color: @white;
Il prossimo file che stiamo per creare è un mixins.less file. La maggior parte delle modifiche che faremo riguarderanno i colori dei collegamenti. Creerò un mixin che prende un colore link e link hover color. Restituirà lo stile in base a ciò che viene passato in esso.
Prima crea un mixins.less file. Apri il file e incolla quanto segue:
// mixins.less .links (@ link-color: @blue, @ link-color-hover: @ blue-dark) a color: @ link-color; &: hover color: @ link-color-hover;
Il prossimo file conserverà vari stili come il corpo e i collegamenti. Creare un misc.less quindi incollare il file nel seguente modo:
// corpo misc.less background-color: @ body-background-color; colore: @ colore del corpo; .site background-color: @ content-background-color; .links ();
Si consiglia di mantenere tutti gli stili di navigazione insieme in modo da poter sapere rapidamente dove andare a modificare i nostri menu.
Creare un navigation.less file e aggiungere il seguente:
// navigation.less .main-navigation li .links (@ menu-items-color, @ menu-items-color-hover); .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor a color: @ menu-items-color-active;
Successivamente, aggiungeremo lo stile per il titolo e la descrizione del sito nell'intestazione.
Creare un header.less file e aggiungere il seguente:
// header.less. site-title a color: @ site-title-color; .site-header h1, h2 .links (@ site-title-color, @ site-title-color-hover); . site-header h2 color: @ site-description-color;
Successivamente vorremmo aggiungere un po 'di stile per i nostri post. Cambierà il colore del titolo e i colori di collegamento di intestazione e piè di pagina.
Creare un posts.less file e aggiungere il seguente:
// posts.less. site-content article border-bottom: 4px double @ border-color; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Vogliamo che anche i nostri titoli di pagina siano bianchi. Ti suggerisco anche di inserire eventuali differenze di stile che desideri per le pagine rispetto ai post anche qui.
Creare un pages.less file e aggiungere il seguente:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Volevo aggiungere un bordo a sinistra della barra laterale, quindi aggiungerò quello in a sidebar.less file. Crea quel file e aggiungi quanto segue:
// sidebar.less #secondary border-left: 1px solid @ border-color; padding-left: 20px;
Vogliamo rendere bianchi i titoli dei widget e fare in modo che i link nei nostri widget corrispondano agli altri link nel tema secondario. Voglio anche cambiare i colori del modulo di ricerca.
Si consiglia di inserire qualsiasi stile per i widget in widgets.less e mantenere lo styling per il contenitore che li circonda sidebar.less.
Creare un widgets.less file e aggiungere il seguente:
// widgets.less .widget-area .widget .widget-title color: @ gray-light; .links (); // Cerca modulo #s, #searchsubmit background: @ search-form-background-color; border-color: @ search-form-border-color; colore bianco;
L'ultimo file che stiamo per creare è footer.less. Conterrà qualsiasi stile per il piè di pagina del tema del nostro bambino.
Creare un footer.less file e aggiungere il seguente:
// footer.less footer [role = "contentinfo"] .links ();
Quindi abbiamo creato tutto il nostro individuo .Di meno file per suddividere i nostri cambiamenti di stile in una struttura logica. Avresti dovuto vederlo mentre stavamo creando i nostri file, stavamo usando le variabili che abbiamo creato variables.less in tutto il nostro altro .Di meno File. Abbiamo anche usato il nostro .(link) mixin da mixins.less molto, pure.
Il modo in cui collegheremo tutti questi .Di meno i file insieme utilizzano le importazioni.
Le importazioni in CSS e LESS sono proprio come quelle in altre lingue. Stai dicendo al tuo compilatore che vuoi che il tuo file attuale sia al corrente e usi altri file. È come importare una libreria o un framework che usi in .NET, gemme di Ruby, ecc.
La sintassi per importare un file con LESS è proprio come quella dei CSS. Dal momento che tutti i nostri .Di meno i file sono nella stessa cartella, useremo il seguente:
@import "filename.less";
Questo dirà al nostro compilatore LESS che quando si compila questo file, si dovrebbe usare anche questo altro file.
Nel nostro style.less file, vorremmo aggiungere le importazioni per ciascuno dei .Di meno file che abbiamo creato. Questo assicurerà anche che qualsiasi .Di meno file in cui importi style.less sarà collegato pure.
Ad esempio, se importiamo variables.less e widgets.less nel nostro style.less file, le variabili che abbiamo definito variables.less sarà accessibile in widgets.less.
/ * Nome del tema: URI del tema meno costruito: http://wp.tutsplus.com Descrizione: tema del bambino per il tema Twenty Twelve Autore: Jason Bradley Autore URI: http://everchangingmedia.com Modello: twentytwelve Versione: 0.1.0 * / // Importa gli stili del tema principale @import url ("... /twentytwelve/style.css"); / * / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ CONTENTS / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Miscellaneo - Variabili - Mixins - Varie 2. Navigazione 3. Intestazione 4. Messaggi 5. Pagine 6. Barra laterale 7. Widget 8. Footer * / / * ------------------------------------------ ---------------------------- 1. Miscellanous * / // Variabili @import "variables.less"; // Mixins @import "mixins.less"; // Misc @import "misc.less"; / * ------------------------------------------------ ---------------------- 2. Navigazione * / @import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Intestazione * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Messaggi * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Pagine * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Barra laterale * / @import "sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widget * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Piè di pagina * / @import "footer.less"; Ora che abbiamo tutto il nostro .Di meno file creati e tutti importati nel nostro style.less file, vorremmo impostare il percorso di output di style.less in CodeKit.
Abbiamo spiegato come impostare l'output del nostro .Di meno file nel post precedente.
La cosa grandiosa dell'utilizzo di LESS per la creazione e la compilazione dei CSS è che puoi scegliere il formato da compilare. Ciò significa che puoi compilarlo nella sua forma normale o minimizzare i tuoi file.
Si consiglia di minimizzare tutti i tuoi siti .css File. Più piccolo è il file, più velocemente verrà caricato il tuo sito. Si desidera la dimensione del file più piccola perché ogni pagina non verrà caricata e visualizzata dall'utente fino al .css i file sono caricati La velocità di caricamento della pagina influisce anche sul tuo SEO.
Con CodeKit, cambiare l'impostazione del tuo output in minify è facile come cambiare il Stile di output a Minificato. Ora ogni volta che apporti una modifica a qualcuno dei tuoi .Di meno file, CodeKit li compilerà automaticamente e li ridimensionerà a quelli del tuo bambino style.css file.
Ho esaminato le migliori pratiche per strutturare il tuo .Di meno file nel tema o nel tema figlio. Ho anche parlato della struttura delle cartelle e dove posizionare il tuo .Di meno File.
Ti ho guidato creando tutto il .Di meno file e ha parlato di come collegarli tutti al tuo style.less file usando le importazioni. Infine ho parlato di dove impostare il percorso di uscita del tuo style.less file e come avere CodeKit come minimo .Di meno file quando si compila.
Ho anche aggiunto il lessbuilt tema figlio su GitHub in modo da poterlo forgiare o scaricarlo.
