Introducere în Sass pentru noii designeri de teme WordPress

Ca nou designer de teme WordPress, înveți rapid provocările menținerii fișierelor CSS lungi, păstrându-le organizate, scalabile și lizibile.

Mulți designeri și dezvoltatori front-end, inclusiv cei de la WPBeginner, recomandă utilizarea unui limbaj de preprocesare CSS precum Sass sau LESS pentru a facilita munca. Dar ce sunt acești preprocesoare? Și cum începeți cu ei?

Acest articol este o introducere în Sass pentru noii designeri de teme WordPress. Vă vom spune ce este un preprocesor CSS, de ce aveți nevoie de el și cum să le instalați și să începeți să le folosiți imediat.

Ce este Sass (Syntactically Awesome Stylesheet)?

CSS pe care îl folosim a fost conceput pentru a fi un limbaj de foaie de stiluri ușor de utilizat. Cu toate acestea, web-ul a evoluat, iar designerii au nevoie de un limbaj de foaie de stiluri care să le permită să facă mai multe cu mai puțin efort și timp.

Limbajele preprocesoare CSS, cum ar fi Sass, vă permit să utilizați funcționalități care nu sunt disponibile în prezent în CSS, cum ar fi variabile, operatori matematici de bază, imbricare, mixins etc.

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

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

Introducere în Sass pentru dezvoltarea temelor WordPress

Majoritatea designerilor de teme folosesc un mediu de dezvoltare local pentru a lucra la temele lor înainte de a le implementa într-un mediu de staging sau un server live. Deoarece Sass este un limbaj de preprocesare, va trebui să îl instalezi în mediul tău de dezvoltare local.

Primul lucru pe care trebuie să-l faci este să instalezi Sass. Poate fi folosit ca un instrument de linie de comandă, dar există și câteva aplicații GUI frumoase disponibile pentru Sass. Recomandăm utilizarea Koala, care este o aplicație gratuită open-source disponibilă pentru Mac, Windows și Linux.

Pentru scopul acestui articol, va trebui să creezi o temă goală. Pur și simplu creează un nou folder în /wp-content/themes/. Îl poți numi „mytheme” sau orice altceva dorești. În interiorul folderului temei goale, creează un alt folder și numește-l stylesheets.

În folderul stylesheets, trebuie să creați un fișier style.scss folosind un editor de text precum Notepad.

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

Faceți clic dreapta pe fișierul Sass și selectați opțiunea Set Output Path. Acum selectați rădăcina directorului temei dvs., exemplu, /wp-content/themes/mytheme/ și apăsați Enter. Koala va genera acum fișierul de ieșire CSS în directorul temei dvs.

Pentru a testa acest lucru, trebuie să deschideți fișierul Sass style.scss într-un editor de text precum Notepad și să adăugați acest cod:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Acum trebuie să salvați modificările și să reveniți la Koala. Faceți clic dreapta pe fișierul Sass și bara laterală va glisa din dreapta. Pentru a compila fișierul Sass, pur și simplu faceți clic pe butonul ‘Compile’.

Puteți vedea rezultatele deschizând fișierul style.css din directorul temei dvs. și acesta va conține CSS-ul procesat, astfel:

body {
  font-family: arial, verdana, sans-serif; }

Observați că am definit o variabilă $fonts în fișierul nostru Sass. Acum, ori de câte ori avem nevoie să adăugăm familia de fonturi, nu mai trebuie să tastăm din nou numele tuturor fonturilor. Putem folosi pur și simplu $fonts.

Ce alte superputeri aduce Sass în CSS?

Sass este incredibil de puternic, compatibil retroactiv și foarte ușor de învățat. Așa cum am menționat anterior, puteți crea variabile, imbricare, mixins, import, partițiale, operatori matematici și logici etc.

Acum vă vom arăta câteva exemple și le puteți încerca pe tema dvs. WordPress.

Gestionarea foilor de stiluri multiple

O problemă comună cu care vă veți confrunta ca designer de teme WordPress sunt foile de stiluri mari, cu multe secțiuni. Probabil veți derula mult în sus și în jos pentru a repara lucrurile în timp ce lucrați la tema dvs..

Folosind Sass, puteți importa mai multe fișiere în foaia dvs. principală de stiluri și puteți genera un singur fișier CSS pentru tema dvs.

Ce zici de @import CSS?

Problema utilizării @import în fișierul dvs. CSS este că de fiecare dată când adăugați un @import, fișierul dvs. CSS face o altă cerere HTTP către server. Acest lucru afectează timpul de încărcare a paginii, ceea ce nu este bun pentru proiectul dvs.

Pe de altă parte, când folosești @import în Sass, acesta va include fișierele din fișierul tău Sass și le va servi pe toate într-un singur fișier CSS pentru browsere.

Pentru a învăța cum să folosești @import în Sass, mai întâi trebuie să creezi un fișier reset.scss în directorul stylesheets al temei tale și să lipești acest cod în el.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Acum trebuie să deschizi fișierul tău principal style.scss și să adaugi această linie acolo unde dorești să fie importat fișierul reset:

@import 'reset';

Observați că nu trebuie 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. Acum deschideți fișierul principal style.css al temei dvs. și veți vedea CSS-ul dvs. de resetare inclus în el.

Imbricarea î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 lucrat cu ele. De exemplu, puteți imbrica toate elementele pentru secțiunea <article>, sub selectorul article.

Ca designer de teme WordPress, acest lucru vă permite să lucrați la diferite secțiuni și să stilizați fiecare element cu ușurință. Pentru a vedea imbricarea în acțiune, adăugați acest lucru în fișierul dvs. style.scss:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

După procesare, va genera următorul CSS:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Ca designer de teme, veți proiecta un aspect și o senzație diferită pentru widget-uri, postări, meniuri de navigare, antet, etc. Utilizarea imbricării în Sass o face bine structurată și nu trebuie să scrieți aceleași clase, selectoare și identificatori în mod repetat.

Folosirea Mixin-urilor în Sass

Uneori veți dori să reutilizați anumite CSS-uri pe tot parcursul proiectului dvs., chiar dacă regulile de stil vor fi aceleași, deoarece le veți folosi pe selectori și clase diferite. Aici sunt utile mixin-urile. Să adăugăm un mixin în fișierul dvs. style.scss:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Acest mixin practic ascunde un text de la afișare. Iată un exemplu despre cum poți folosi acest mixin pentru a ascunde textul pentru logo-ul tău:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Observați că trebuie să folosiți @include pentru a adăuga un mixin. După procesare, va genera următorul CSS:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixins sunt, de asemenea, foarte utile cu prefixele de furnizor. Când adăugați valori de opacitate sau bordură raza, folosind mixins puteți economisi mult timp. Uitați-vă la acest exemplu, unde am adăugat un mixin pentru a adăuga raza bordurii.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

După compilare, va genera următorul CSS:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Resurse suplimentare

Sass Lang
The Sass Way

Sperăm că acest articol v-a ajutat să învățați despre Sass pentru dezvoltarea temelor WordPress. Mulți designeri de teme WordPress îl folosesc deja. Unii merg atât de departe încât spun că în viitor tot CSS-ul va fi preprocesat, iar dezvoltatorii de teme WordPress trebuie să-și îmbunătățească jocul. De asemenea, s-ar putea să doriți să consultați ghidul nostru despre sfaturi despre clasa corpului WordPress pentru designeri de teme, sau selecțiile noastre experte de cei mai buni constructori de pagini drag and drop pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.