Accentsconagua

Utilizarea Preprocesoarelor CSS Cu WordPress - Ce sunt acestea?

Cod
Share

Am lucrat cu WordPress timp de trei ani, dar nu a fost decât cu un an în urmă că am avut serios despre dezvoltarea WordPress. Mai exact, sunt pasionat de temele copiilor și petrec o mare parte din timpul meu de lucru în dezvoltarea temelor.

În ultimii câțiva ani, am văzut creșterea preprocesoarelor CSS - în principal, unelte care simplifică scrierea foilor de stil și le fac mai ușor de întreținut.

În această serie, vom analiza ce preprocesoare sunt, ce sunt populare disponibile și cum le putem integra în dezvoltarea temelor noastre.

Unde ne îndreptăm

Când vine vorba de dezvoltarea interfeței cu utilizatorul, nu este vorba numai de modul în care lucrurile arata grozav, ci și de a face lucrurile bine structurate și cât mai performante, și cred că acest lucru ar trebui să fie ceva care este tras în proiectele noastre WordPress , de asemenea.

În această serie, am de gând să dau un fundal puțin despre ceea ce sunt preprocesorii și să evidențiez unii dintre jucătorii cheie din spațiu. Voi vorbi, de asemenea, despre unele dintre cele mai populare cadre. Voi trece apoi la o scufundare profundă în mai puțin și explică de ce prefer să o folosesc. În cele din urmă, voi detalia cum să îl folosiți cu CodeKit pentru a vă compila CSS-ul pentru tema dvs..

Despre Preprocesoarele CSS

Așa cum am menționat, există un număr de preprocesoare CSS, cele mai frecvent utilizate fiind LESS și SASS. Ambele sunt similare din punct de vedere sintactic și pot crește dramatic viteza cu care puteți scrie CSS.

Există câteva diferențe, cum ar fi compilatoarele și extensiile sau cadrele cu care pot fi combinate.

MAI PUȚIN

LESS este o limbă de stil dinamic. Puteți scrie programul dvs. CSS într-un program .Mai puțin fișier și compilați ieșirea dvs. într-o .css fişier. Limba de compilare pentru LESS este JavaScript. Acest lucru este minunat pentru că puteți rula un compilator pe partea de server sau pe partea clientului.

Unele dintre caracteristicile LESS includ:

  • Variabile - Variabilele pot fi definite și sunt utilizate în întregul fișier. Efectuați o schimbare într-un singur loc și vedeți-o actualizată ori de câte ori este folosit.
  • Mixins - mixurile includ o grămadă de proprietăți dintr-un set de reguli într-un alt set de reguli. De asemenea, puteți utiliza Parametric Mixins care acceptă argumente.
  • Reguli inveșate - Regulile înmormântate vă oferă posibilitatea de a utiliza cuiburile în loc de, sau în combinație cu cascadarea.
  • Domenii de nume - Domeniile de nume vă permit să grupați variabilele sau mixele, în scopuri organizaționale sau doar pentru a oferi unele încapsulare.

Voi face mai multe detalii cu privire la sintaxa pentru acestea în următorul post din această serie.

Două dintre cele mai populare cadre front-end care utilizează mai puțin sunt:

  • bootstrap
  • fara rama

SASS

SASS este o extensie a CSS3. Are două sintaxe: .SCSS și .Sass. .SCSS este cea mai obișnuită sintaxă folosită, dar susține și sintaxa mai veche.

Unele dintre caracteristicile SASS includ:

  • Variabile - Variabilele pot fi definite și sunt utilizate în întregul fișier. Faceți o schimbare într-un singur loc și vedeți-o actualizată ori de câte ori este folosit ca mai puțin.
  • Mixins - Mixurile vă permit să utilizați din nou bucăți întregi de CSS, proprietăți sau selectori precum LESS
  • Cuibare - Evitați repetarea prin plasarea selectorilor unul în celălalt, cum ar fi LESS
  • Selector de moștenire - Poate spune unui selector să moștenească toate stilurile unui altul fără a dubla proprietățile CSS. Nu este disponibil în LESS.

Iată câteva cadre care includ SASS și SCSS:

  • fundație
  • Gravitatie
  • fara rama

Concluzie

Preprocesoarele CSS reprezintă cu siguranță o tendință crescândă în designul web. Ele pot accelera dramatic timpul petrecut în scrierea de stiluri pentru site-urile dvs..

Ele pot ajuta, de asemenea, cu structurarea CSS-ului dvs. ca și cum ați avea funcții în alte limbi precum PHP sau JavaScript. Dacă nu utilizați deja preprocesoarele CSS în proiectul dvs. web, ar trebui să o considerați cu siguranță.

Acum că am aruncat o privire asupra a două dintre cele mai populare preprocesoare, voi face o scufundare mai profundă în LESS și voi da câteva motive pentru care eu personal aleg să o folosesc în postul următor. De asemenea, vă voi arăta cum să începeți să utilizați CodeKit împreună cu proiectele WordPress.

Resurse

  • MAI PUȚIN
  • SASS
Cod
×