Share
Less.CSS sta diventando uno strumento popolare per rendere i fogli di stile "dinamici". Ho lavorato per un po 'con l'integrazione di Less.CSS con WordPress, quindi oggi vedremo un breve tutorial su come iniziare a usarlo e il framework CSS BluePrint per un flusso di lavoro più veloce in WordPress.
So cosa stai pensando ma, scusa, non vuol dire che scrivi solo il codice LESS. Quante volte hai lavorato a un progetto e hai desiderato poter semplificare le cose includendo una funzione nel tuo file CSS, usando alcune variabili per cambiare i colori o altre proprietà o altre tecniche di programmazione? Con Less CSS, il tuo desiderio può essere trasformato in realtà.
Less è uno strumento CSS che consente di accelerare e semplificare lo sviluppo consentendo di utilizzare variabili, ereditarietà (tramite mixin), funzioni (operazioni) e altro ancora. In poche parole, Less CSS ti dà la possibilità di mescolare le tecniche di programmazione con il tuo CSS. Basta parlare però. Iniziamo!
Meno è disponibile in due versioni principali, una versione compilata e una versione con JavaScript. Ai fini della nostra discussione ci concentreremo sul compilato versione. Ho scelto di concentrarmi su questa versione principalmente perché non mi piace includere i file nel mio sito che non è necessario. Dopotutto, ogni file che il tuo sito deve funzionare e avere un aspetto attraente fa sì che il sito si carichi un po 'più lentamente.
Quindi il modo in cui funziona è il seguente: si visita il seguente link e si scarica l'app per mac. Spiacente utenti di Windows, è solo Mac, quindi questa versione del tutorial funzionerà solo per gli utenti Mac. Una volta scaricata l'app, devi configurare la struttura del tuo sito (che illustrerò di seguito).
Copriremo una grande quantità di contenuti in questo tutorial. Credo nel lavorare nel modo più efficiente possibile con i migliori strumenti disponibili. Per questo motivo, impiegheremo WordPress e Planimetria lavorare con questo progetto. Prima di passare al passaggio successivo, andare avanti e scaricare Blueprint Framework.
L'unico file che stiamo per usare è screen.css poiché combina tutti i file principali che compongono il framework in un unico file. Vai avanti e trova quello ed estrailo sul tuo desktop. Ai fini della brevità, questo tutorial presume che abbiate familiarità con l'impostazione di WordPress e con le basi di Blueprint. Se hai bisogno di maggiori informazioni su questo, lasciatemi qualche commento e ti risponderò o scriverò un post su di esso. C'è anche un tutorial informativo su Nettuts su Blueprint
Per impostare la struttura del file, fare riferimento allo screenshot qui sotto. Questo è come dovrebbe essere la struttura della directory, meno i file css nella cartella stylesheets. Questi verranno generati automaticamente quando salvi un file.
Le cose importanti da prendere da questo screenshot sono che abbiamo una cartella styles.css nella directory dei temi in WordPress che fa alcuni trucchi. Questo file preleva alcuni altri file da una sottodirectory tramite la direttiva @import. La ragione di ciò è che WordPress utilizza i commenti in styles.css per identificare un tema. Non metterlo tende a rovinare le cose abbastanza male. Includendo i file nel styles.css file tramite una natura composita, stiamo essenzialmente sfruttando tutte le funzionalità dinamiche di Less CSS assicurandoci che il nostro tema si comporti correttamente in WordPress. Stiamo anche minimizzando il nostro CSS, per accelerare i tempi di caricamento del sito. Inoltre, eliminerà tutti i commenti e lo spazio bianco.
Ci sono alcune impostazioni che mi piace controllare. Probabilmente vorresti farlo anche tu. Di seguito è uno screenshot di questi.
Quindi, posiziona il screen.css file in una sottodirectory denominata fogli di stile insieme a un file main.css. Quindi rinomina entrambi questi file per avere un'estensione .less invece di .css. Dopo averlo fatto, vai avanti e apri l'app Meno sul tuo Mac e trascina la cartella del tema nell'app. Questo essenzialmente lo imposta in modo che l'app Less sappia del tuo progetto. Ora, ogni volta che si salvano meno file vengono automaticamente compilati in CSS. Abbastanza elegante eh? Se per qualche motivo questo non accade, puoi fare clic sulla scheda del compilatore e fare clic su Compila tutto.
Ok, ora che tutto questo è impostato, cosa fa davvero Meno per me? Sono felice che tu abbia chiesto al giovane Padawan. Lascia che ti mostri!
Quindi, dì che hai alcuni colori primari sul tuo sito web. Invece di dover inserire valori esadecimali o RGBA ogni volta che si desidera utilizzare un colore, è sufficiente utilizzare una variabile per memorizzare il proprio colore e quindi utilizzare il nome della variabile per identificare il colore che si desidera utilizzare. Ad esempio, per memorizzare il grigio chiaro è possibile dichiarare una variabile in questo modo:
@lightGray = #ddd; / * - e quindi usarlo nel tuo css in questo modo: - * / div # box1 background: @lightGray;
Ora, ogni volta che devi cambiare il colore tutto quello che devi fare è cambiare il valore di @lightGray e lo propagherà nel resto del tuo file css.
Il prossimo trucco elegante di cui voglio discutere è l'ereditarietà. Per i neofiti del CSS, l'ereditarietà significa semplicemente che una classe può ereditare o raccogliere tratti da una classe precedente (classe Genitore). Questo è fatto da un costrutto Less noto come Mixins. Questi praticamente incorporano tutte le proprietà di una classe all'interno di un'altra classe. Una delle cose interessanti di Mixins è che qualunque proprietà specificata nella classe figlia sovrascriverà lo stesso comportamento che viene ereditato dalla classe genitore. In parole povere, questo significa che ho una classe che compone i miei pulsanti sulla mia pagina usando alcuni pratici gradienti css3. Anche se mi piace il padding, la dimensione del font e altri attributi sul pulsante, potrei volere che i miei colori cambino. Vorrei fare quanto segue:
/ * - Pulsante che sto usando come pulsante base / genitore - * / .myBlueButton display: block; imbottitura: 4px 12px; sfondo: rgb (30,87,153); / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, rgba (30,87,153,1)), color-stop (50%, rgba (41,137,216 , 1)), color-stop (51%, rgba (32,124,202,1)), color-stop (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232 1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (in alto, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba ( 125,185,232,1) 100%); / * IE10 + * / sfondo: gradiente lineare (superiore, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Pulsante che Im utilizza come pulsante figlio / ereditario - * / .myGreenButton .myBlueButton; sfondo: rgb (157,213,58); / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188,10,1) 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, rgba (157,213,58,1)), color-stop (50%, rgba (161,213 , 79,1)), color-stop (51%, rgba (128,194,23,1)), color-stop (100%, rgba (124,188,10,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (in alto, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / sfondo: gradiente lineare (superiore, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
C'è un avvertimento da tenere a mente. Se si utilizza il generatore di gradiente css3, a Less non sembra piacere la riga che inizia con il filtro. Come puoi vedere, il pulsante figlio cattura tutto il comportamento dal pulsante genitore includendo gli attributi del pulsante blu sulla linea contrassegnata.
myBlueButton;
.
Quindi sostituisce il colore specificando i propri colori di sfondo. Il prossimo e ultimo elemento che tratteremo sta usando un mix parametrico (un mixaggio che prende parametri) con Less. Questo è utile nei casi in cui si utilizzano prefissi specifici del browser e così via.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -border-radius: @border_radius;
Naturalmente, ci sono molti altri comportamenti ed effetti che è possibile implementare. Puoi seguire il link nella parte superiore del tutorial sul sito Meno e studiare il contenuto del tuo cuore. C'è anche un video di suggerimento rapido su Nettuts che parla della libreria Less.js.
Ecco le basi su come impostare un progetto da utilizzare in WordPress con Less e BluePrint. Spero che ciò che hai imparato qui oggi si riveli utile in progetti futuri. Se hai altre domande, non esitare a rispondere nei commenti.
Accentsconagua