Introducere în Sass pentru noii designeri tematici WordPress

Ca un nou designer tematic WordPress, veți învăța repede provocările de menținere a fișierelor CSS lungi, păstrându-le în același timp organizate, scalabile și ușor de citit. Veți afla, de asemenea, că mulți designeri și dezvoltatori de front-end recomandă utilizarea unui limbaj preprocesor CSS ca Sass sau LESS. Dar ce sunt aceste lucruri? și cum începeți cu ei? Acest articol este o introducere la Sass pentru noii designeri tematici WordPress. Vă vom spune ce este un preprocesor CSS, de ce aveți nevoie de el și cum să îl instalați și să îl utilizați imediat.

Ce este Sass?

CSS pe care îl folosim a fost proiectat pentru a fi o limbă de stil ușor de utilizat. Cu toate acestea, web-ul a evoluat, la fel și nevoia designerilor de a avea o limbă de stil care să le permită să facă mai mult cu mai puțin efort și timp. Limbi de preprocesor CSS, cum ar fi Sass, vă permit să utilizați funcții care nu sunt disponibile în prezent în CSS, cum ar fi utilizarea variabilelor, operatori de matematică de bază, cuiburi, mixuri etc..

Este foarte asemănător cu PHP, care este un limbaj preprocesor care execută un script pe server și generează o ieșire HTML. În mod similar, Sass preproceses .scss pentru a genera fișiere CSS care pot fi utilizate de browsere.

De la versiunea 3.8, stilurile zonei de administrare WordPress au fost portate pentru a utiliza Sass pentru dezvoltare. Există multe magazine tematice WordPress și dezvoltatori care deja utilizează Sass pentru a-și accelera procesul de dezvoltare.

Noțiuni de bază cu Sass pentru dezvoltarea temei WordPress

Cei mai mulți designeri de teme folosesc mediul de dezvoltare locală pentru a lucra la temele lor înainte de al implementa într-un mediu de staționare sau un server live. Deoarece Sass este un limbaj preprocesor, va trebui să îl instalați în mediul dvs. de dezvoltare locală.

Primul lucru pe care trebuie să-l faceți este să instalați Sass. Acesta poate fi folosit ca un instrument de linie de comandă, dar există și câteva aplicații grafice GUI disponibile pentru Sass. Vă recomandăm să utilizați Koala, o aplicație gratuită open source disponibilă pentru Mac, Windows și Linux.

Din motive de acest articol, va trebui să creați o temă necompletată. Pur și simplu creați un nou folder în / Wp-content / teme /. Puteți să-i numiți "mie" sau orice altceva doriți. În interiorul dosarului tematic gol creați un alt dosar și denumiți foile de stil.

În dosarul Stiluri, trebuie să creați o style.scss fișier utilizând un editor de text ca Notepad.

Acum trebuie să deschideți Koala și faceți clic pe pictograma plus pentru a adăuga un nou proiect. Apoi, localizați directorul tematic și adăugați-l ca proiect. Veți observa că Koala va găsi automat fișierul Sass în directorul dvs. de stil și îl va afișa.

Faceți clic dreapta pe fișierul Sass și selectați Setați calea de ieșire opțiune. Acum, selectați rădăcina directorului tematic, de exemplu, / Wp-content / teme / mytheme / și apăsați Enter. Koala va genera acum fișierul de ieșire CSS în directorul tematic. Pentru a testa acest lucru trebuie să deschideți fișierul Sass style.scss într-un editor de text ca Notepad și adăugați acest cod:

 $ fonturi: arial, verdana, sans-serif; corp font-family: $ fonts;  

Acum trebuie să salvezi schimbările și să te întorci la Koala. Faceți clic dreapta pe fișierul dvs. Sass și bara laterală va aluneca în dreapta. Pentru a compila fișierul Sass, faceți clic pe 'Compila' buton. Puteți vedea rezultatele deschizând style.css fișier în directorul dvs. temă, și va avea procesate CSS, astfel:

 corp font-family: arial, verdana, sans-serif;  

Observați că am definit o variabilă fonturi $ în dosarul nostru Sass. Acum, ori de câte ori avem nevoie să adăugăm o familie de fonturi, nu mai trebuie să tastăm din nou numele tuturor fonturilor. Putem folosi doar fonturi $.

Ce alte superputere Sass aduce la CSS?

Sass este incredibil de puternic, compatibil înapoi și ușor de învățat. Așa cum am menționat mai devreme, puteți crea variabile, cuiburi, amestecuri, import, partiale, operatori matematici și logici etc. Acum vă vom arăta câteva exemple și le puteți încerca pe tema WordPress.

Gestionarea mai multor foi de stil

O problemă obișnuită cu care vă veți confrunta ca designer de teme WordPress este o foaie de stil mare, cu o mulțime de secțiuni. Veți fi, probabil, scrolling în sus și în jos o mulțime pentru a rezolva lucruri în timp ce lucra la tema ta. Folosind Sass, puteți importa mai multe fișiere în foaia de stil principală și puteți transmite un singur fișier CSS pentru tema dvs..

Ce este despre CSS @import?

Problema cu utilizarea @importului în fișierul dvs. CSS este că de fiecare dată când adăugați un @import, fișierul dvs. CSS face o altă solicitare HTTP către server. Acest lucru determină timpul de încărcare a paginii, care nu este bun pentru proiectul dvs. Pe de altă parte, atunci când utilizați @import în Sass, acesta va include fișierele din fișierul dvs. Sass și le va difuza într-un singur fișier CSS pentru browsere.

Pentru a afla cum să utilizați @import în Sass, mai întâi trebuie să creați o reset.scss fișierul din directorul de stiluri al temei și lipiți acest cod în el.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: none (domeniu public) * / html, corp, div, span, applet, obiect, iframe, h1, h2, h4, mare, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, dd, ol, ul, li, câmp, formă, etichetă, legendă, tabel, caption, t, tfoot, hgroup, meniu, nav, ieșire, rubin, secțiune, rezumat, timp, marcă, audio, video margine: 0; umplutura: 0; frontieră: 0; font-size: 100%; font: inherit; aliniere verticală: linia de bază;  / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block;  corp linie-înălțime: 1;  ol, ul stil-list: nici unul;  blockquote, q citate: none;  blockquote: înainte, blockquote: după, q: înainte, q: după content: "; 

Acum trebuie să deschideți fișierul principal stil.scss și să adăugați această linie unde doriți să fi importat fișierul de resetare:

 @import 'reset'; 

Observați că nu este necesar să introduceți numele complet al fișierului. Pentru a compila acest lucru, trebuie să deschideți Koala și să faceți clic din nou pe butonul de compilare. Deschideți acum tema principală a stilului temei ccss și veți vedea css-ul de resetare inclus în el.

Nestin în Sass

Spre deosebire de HTML, CSS nu este un limbaj imbricat. Sass vă permite să creați fișiere imbricate, ușor de gestionat și de utilizat. De exemplu, puteți introduce toate elementele pentru secțiune, sub selectorul articolelor. Ca designer de teme WordPress, aceasta vă permite să lucrați pe diferite secțiuni și să stilizați cu ușurință fiecare element. Pentru a vedea nestin în acțiune, adăugați-l la dvs. style.scss fişier:

 .intrare-conținut p font-size: 12px; line-height: 150%;  ul linie-înălțime: 150%;  a: link, a: vizitat, a: activ text-decoration: none; culoare: # ff6633;  

După procesare se va afișa următorul CSS:

 .intrare-conținut p font-size: 12px; linia-înălțime: 150%;  .entry-content ul linie-înălțime: 150%;  .entry-content a: link, .entry-content a: vizitat, .entry-content a: activ text-decoration: none; culoare: # ff6633;  

Ca designer tematic, veți proiecta un aspect diferit pentru widget-uri, posturi, meniuri de navigare, antet etc. Folosind nestin în Sass îl face bine structurat și nu trebuie să scrieți aceleași clase, selectori și identificatori peste și Din nou.

Folosind Mixins în Sass

Uneori, va trebui să reutilizați unele CSS prin proiectul dvs. chiar dacă regulile de stil vor fi aceleași pentru că le veți folosi pe selectori și clase diferite. Acesta este locul în care mixurile vin la îndemână. Permite adăugarea unui mixin în fișierul dvs. stil.scss:

 @mixin ascunde-text overflow: hidden; text-liniuță: -9000px; display: block;  

Acest amestec ascunde în esență un text din afișare. Iată un exemplu în care puteți folosi acest mixin pentru a ascunde textul pentru sigla dvs.:

 .logo fundal: url ("logo.png"); height: 100px; lățime: 200px; @ includeți textul ascuns;  

Observați că trebuie să utilizați @include pentru a adăuga un amestec. După procesare se va genera următorul CSS:

 .logo fundal: url ("logo.png"); înălțime: 100px; lățime: 200px; overflow: ascuns; text-indent: -9000px; afișare: bloc;  

Amestecurile sunt, de asemenea, foarte utile cu prefixele furnizorilor. Când adăugați valori de opacitate sau rază de graniță, folosind mixuri, puteți să vă economisiți o mulțime de timp. Uită-te la acest exemplu, în care am adăugat un amestec pentru a adăuga raza de graniță.

 @mixin border-radius (raza $) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; -ms-raza de graniță: raza $; - raza de graniță: raza $; raza razei: raza $;  .buttonul @include raza de graniță (10px);  .button mic @ include raza de graniță (5px);  

După compilare, va genera următorul CSS:

 .buton mare -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; raza de graniță: 10 pixeli; . butonul mic -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-raza de graniță: 5px; -o-border-radius: 5px; raza de graniță: 5px;  

Sperăm că acest articol a dat naștere interesului dvs. pentru dezvoltarea temelor WordPress pentru Sass. Mulți designeri de teme WordPress o utilizează deja. Unii merg atât de departe încât să spună că în viitor tot CSS va fi preprocesat, iar dezvoltatorii temei WordPress trebuie să își dezvolte jocul. Spuneți-ne ce credeți despre utilizarea unui limbaj preprocesor CSS ca Sass pentru dezvoltarea temei WordPress lăsând un comentariu mai jos.

Resurse aditionale

Sass Lang
Calea Sass