Utilizzo dei preprogrammi CSS con WordPress - Che cosa sono?

Ho lavorato con WordPress per tre anni, ma non è stato fino a un anno fa che ho preso sul serio lo sviluppo di WordPress. In particolare, sono appassionato di tematiche infantili e trascorro gran parte del mio tempo a lavorare sullo sviluppo del tema.

Negli ultimi due anni abbiamo assistito all'aumento dei preprocessori CSS, principalmente strumenti che facilitano la stesura dei fogli di stile e li rendono più manutenibili.

In questa serie, daremo un'occhiata a cosa sono i preprocess, quali sono i più popolari disponibili e come possiamo integrarli nel nostro sviluppo del tema.

Dove siamo diretti

Quando si parla di sviluppo dell'interfaccia utente, non si tratta solo di come rendere le cose grandi, ma si tratta anche di rendere le cose ben strutturate e il più performanti possibile, e credo che questo dovrebbe essere qualcosa che viene portato avanti nei nostri progetti WordPress , anche.

In questa serie, ho intenzione di dare un po 'di background su cosa sono i pre-processori e di evidenziare alcuni dei giocatori chiave nello spazio. Parlerò anche di alcuni dei quadri più popolari. Passerò poi a un tuffo più profondo in LESS e spiegherò perché preferisco usarlo. Infine illustrerò come utilizzarlo con CodeKit per compilare i CSS per il tema.

Informazioni sui preprocessori CSS

Come accennato, ci sono un certo numero di preprocessori CSS, il più usato è LESS e SASS. Entrambi sono sintatticamente simili e possono aumentare notevolmente la velocità con cui puoi scrivere il tuo CSS.

Ci sono alcune differenze come i loro compilatori, estensioni o framework con cui possono essere combinati.

DI MENO

LESS è un linguaggio di foglio di stile dinamico. Puoi scrivere il tuo CSS programmaticamente in a .Di meno file e compila il tuo output in a .css file. Il linguaggio di compilazione per LESS è JavaScript. Questo è un grande perché è possibile eseguire il compilatore sul lato server o sul lato client.

Alcune delle funzionalità di LESS includono:

Variabili: le variabili possono essere definite e utilizzate in tutto il file. Apporta modifiche in un punto e guardalo aggiornato ovunque venga utilizzato.
Mixins - I mixins includono un gruppo di proprietà da un set di regole a un altro set di regole. Puoi anche usare Mixet parametrici che accettano argomenti.
Regole annidate: le regole nidificate ti consentono di utilizzare la nidificazione anziché, o in combinazione con la cascata.
Namespace - I namespace ti permettono di raggruppare le tue variabili o mixin, a scopi organizzativi, o semplicemente di offrire qualche incapsulamento.

Entrerò più in dettaglio sulla sintassi per questi nel prossimo post di questa serie.

Due dei più popolari framework front-end che usano LESS sono:

bootstrap
senza telaio

SASS

SASS è un'estensione di CSS3. Ha due sintassi: .SCSS e .insolenza. .SCSS è la sintassi più comune utilizzata ma supporta anche la sintassi con rientri più vecchi.

Alcune delle funzionalità di SASS includono:

Variabili: le variabili possono essere definite e utilizzate in tutto il file. Apporta modifiche in un punto e guardalo aggiornato ovunque sia usato come MENO.
Mixins - Mixins ti permettono di riutilizzare interi blocchi di CSS, proprietà o selettori come MENO
Nidificazione - Evita la ripetizione annidando i selettori l'uno dentro l'altro come MENO
Ereditarietà dei selettori: consente a un selettore di ereditare tutti gli stili di un altro senza duplicare le proprietà CSS. Non disponibile in MENO.

Ecco alcuni framework che includono SASS e SCSS:

Fondazione
Gravità
senza telaio

Conclusione

I preprocessori CSS sono decisamente una tendenza in crescita nel web design. Possono velocizzare enormemente il tempo che dedichi a scrivere stili per i tuoi siti.

Possono anche aiutare a strutturare il tuo CSS come faresti con funzioni in altri linguaggi come PHP o JavaScript. Se non stai già utilizzando i preprocessori CSS nel tuo progetto web, dovresti sicuramente prenderlo in considerazione.

Ora che abbiamo dato un'occhiata a due dei preprocessori più popolari, farò un tuffo più profondo in LESS e fornirò alcune ragioni per cui personalmente scelgo di usarlo nel prossimo post. Ti mostrerò anche come iniziare a utilizzare CodeKit con i tuoi progetti WordPress.

risorse

DI MENO
SASS

Codice