Un ghid simplu și ușor de a înțelege Sass

Cu ceva timp în urmă Thoriq Firdaus a scris un articol minunat despre cum să începeți cu Sass, care ți-a arătat cum să instalezi și să folosești acest limbaj preprocesor CSS extrem de util (poate vrei să-l vezi, să știi, să începi).

În acest articol m-am gândit să vă dau un pic mai multă înțelegere în ceea ce puteți face cu Sass și modul în care dezvoltatorii îl folosesc în fiecare zi pentru a crea un cod CSS mai bun și mai modular. Treceți mai departe la secțiunea dorită:

Instrumentele de comerț
variabile
Nesting
Extindeți seturile de reguli
Mixins
Selector de locașuri
Operațiuni
funcţii

Instrumentele de comerț

Thoriq ți-a arătat cum poți folosi Sass din linia de comandă folosind sass - vizionează comanda.

Dacă preferați unelte GUI, puteți merge cu aplicația mea personală preferată, Codekit, un instrument de dezvoltare web pentru compilarea Sass, concatenarea, autoprefixarea și multe altele. Prepros este o altă aplicație foarte capabilă care poate fi utilizată pe toate sistemele. Ambele sunt aplicații plătite dar merită bine dacă le veți folosi pe termen lung.

Dacă vrei doar să încerci Sass fără să plătească pentru nimic puteți folosi terminalul sau Koala (aici este recenzia noastră), o aplicație gratuită cu multe funcții, care oferă o bogată opțiune, care își poate păstra poziția față de partenerii premium.

variabile

Unul dintre primele lucruri de care ai nevoie să îți înfășeri capul este variabilele. Dacă veniți dintr-un limbaj de codare PHP sau altul similar, aceasta va fi a doua natură pentru dvs. Variabilele sunt pentru stocarea biților și a pieselor de informații reutilizabile, cum ar fi o valoare de culoare, de exemplu:

 $ prim_color: # 666666; .button culoare: $ primary_color; . importanță culoare: $ primar_color;

Acest lucru nu poate părea util aici, dar imaginați-vă că aveți 3.000 de linii de cod. Dacă schimbați schema de culori, ar trebui să înlocuiți fiecare valoare de culoare în CSS. Cu Sass puteți doar modificați valoarea din $ primary_color variabilă și se face cu ea.

Sunt utilizate variabilele stocarea numelor de fonturi, dimensiuni, culori și o serie de alte informații. Pentru proiectele mai mari, merităm să extragem toate variabilele într-un fișier separat (vom examina modul în care se va face acest lucru în curând). Ceea ce vă permite să faceți este să reclănați întregul proiect și să schimbați fonturile și alte aspecte cheie fără a atinge vreodată regulile CSS reale. Tot ce trebuie să faceți este să modificați unele variabile.

Nesting

O altă caracteristică de bază pe care o oferă Sass este capacitatea de a cuibui reguli. Să presupunem că construiți un meniu de navigare. Tu ai nav element care conține o listă neordonată, elemente de listă și linkuri. În CSS puteți face ceva de genul:

 #header nav / * Reguli pentru zona de navigare * / #header nav ul / * Reguli pentru meniu * / #header nav li / * Reguli pentru elementele listate * / #header nav a / * Reguli pentru linkuri * /

În selectori, ne repetăm foarte mult. Dacă elementele au rădăcini comune, putem folosi cuiburile scrie regulile noastre într-un mod mult mai curat.

Iată cum ar putea să arate codul de mai sus în Sass:

 #header nav / * Reguli pentru zona de navigare * / ul / * Reguli pentru meniu * / li / * Reguli pentru elementele listate * / a / * Reguli pentru link-uri * /

Cuibul este extrem de util pentru că este face stiluri (mult) mai ușor de citit. Prin utilizarea cuiburilor împreună cu o indentare corespunzătoare puteți obține structuri de cod lizibile, chiar dacă aveți o sumă corectă de cod.

Un dezavantaj al cuiburilor este că poate duc la o specificitate inutilă. În exemplul de mai sus am referit la legăturile cu #header nav a. Ați putea, de asemenea, să utilizați #header nav ul li a care ar fi probabil prea mult.

În Sass, este mult mai ușor să fii foarte specific, deoarece tot ce trebuie să faci este să îți creezi regulile. Următoarele sunt mult mai puțin citibile și destul de specifice.

 #header nav / * Reguli pentru zona de navigare * / ul / * Reguli pentru meniul * / li / * Reguli pentru elementele listei * / a / * Reguli pentru link-uri * /

Extindeți seturile de reguli

Extinderea va fi familiarizată dacă lucrați cu limbi orientate pe obiecte. Este bine de înțeles printr-un exemplu, să creați 3 butoane care sunt mici variații unul de celălalt.

 .butonul display: inline-block; culoare: # 000; fundal: # 333; border-radius: 4px; padding: 8px 11px;  .button-primar @extend.button; fundal: # 0091C2 .button-small @extend .button; font-size: 0.9em; padding: 3px 8px;

.Butonul-primar și .Buton-mici toate clasele extinde .buton clasa, ceea ce înseamnă că ei își iau toate proprietățile și apoi își definesc propriile.

Acest lucru este extrem de util în multe situații în care variațiile unui element pot fi folosite. Mesajele (alert / succes / eroare), butoanele (culori, dimensiuni), tipurile de meniuri și altele ar putea utiliza toate funcționalitățile de extindere pentru o eficiență excelentă a CSS.

O pretenție de prelungire este aceea ei nu vor lucra în interogările mass-media cum v-ați aștepta. Acest lucru este un pic mai avansat, dar puteți citi totul despre acest comportament în Înțelegerea selectorilor locului - selectorul de substituenți este un tip special de extindere despre care vom vorbi în curând.

Mixins

Mixinurile sunt o altă caracteristică preferată a utilizatorilor de preprocesoare. Amestecurile sunt seturi de reguli reutilizabile - sunt perfecte pentru regulile specifice furnizorilor sau pentru regulile CSS lungi scurte.

Cum de a crea o regulă de tranziție pentru elemente de hover:

 @mixing hover-effect -webkit-tranziție: fundal-culoare 200ms; -moz-tranziție: fundal-culoare 200ms; -o-tranziție: culoarea de fundal 200ms; tranziție: culoarea de fundal 200 ms;  a @include hover-effect;  butonul @include hover-effect;

De asemenea, mixurile vă permit să utilizați variabilele definesc valorile din mixin. Am putea rescrie exemplul de mai sus ne dă controlul asupra timpului exact al tranziției. Putem dori ca butoanele să treacă un pic mai lent, de exemplu.

 @mixin hover-effect (viteza $) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-tranziție: fundal-culoare $ viteză; tranziție: background-color $ speed;  a @include hover-efect (200ms);  butonul @ include hover-effect (300ms);

Selector de locașuri

A fost introdus selectorul de selecție cu Sass 3.2 și a fost rezolvată o problemă care ar putea provoca un pic de umflare a codului dvs. CSS generat. Aruncați o privire la acest cod care creează mesaje de eroare:

 .mesaj font-size: 1.1; padding: 11px; border-width: 1px; Stil de frontieră: solid; . pericol de mesaje @extend .message; fundal: # C20030; Culoare: #fff; culoarea frontală: # A8002A;  .message-success @extend .message; fundal: # 7EA800; Culoare: #fff; culoarea frontală: # 6B8F00;

Este foarte probabil că clasa de mesaje nu va fi niciodată utilizată în codul nostru HTML: a fost create pentru a fi extinse, nu folosite ca atare. Acest lucru cauzează un pic de umflături în CSS-ul dvs. generat. Pentru a vă face mai eficient codul, puteți utiliza selectorul de substituent care este indicat cu un semn procentual:

 % mesaj font-size: 1.1; padding: 11px; border-width: 1px; Stil de frontieră: solid; . pericol de mesaje @extend% button; fundal: # C20030; Culoare: #fff; culoarea frontală: # A8002A;  .message-success @extend% button; fundal: # 7EA800; Culoare: #fff; culoarea frontală: # 6D9700;

În această etapă s-ar putea să te întrebi ce înseamnă diferența dintre extinde și mixuri. Dacă utilizați substituenți, acestea se comportă ca un amestec fără parametri. Acest lucru este adevărat, dar producția în CSS diferă. Diferența este aceea mixins reguli duplicate in timp ce înlocuitorii se vor asigura că aceleași reguli împărtășesc selectorii, rezultând mai puțin CSS în cele din urmă.

Operațiuni

E greu să rezistă loviturii de aici, dar acum mă voi abține de la orice glume medicale. Operatorii vă permit să faceți niște matematici în codul dvs. CSS și poate fi destul de util. Exemplul din ghidul Sass este perfect pentru a arăta acest lucru:

 .container lățime: 100%;  articol float: left; lățime: 600px / 960px * 100%;  în afară float: right; lățime: 300px / 960px * 100%;

Exemplul de mai sus creează un sistem de grilă bazat pe 960 pixeli, cu o problemă minimă. Acesta va compila frumos următoarele CSS:

 .container lățime: 100%;  articol float: left; lățime: 62,5%;  în afară float: right; lățime: 31,25%;

O mare utilizare pe care o găsesc pentru operațiuni este de a combina efectiv culorile. Dacă aruncați o privire la mesajul de succes Sass de mai sus, nu este clar că culoarea fundalului și a frontierei au un fel de relație. Prin scăderea unei nuanțe de gri, putem întuneca culoarea, făcând vizibilă relația:

 $ primar: # 7EA800; .message-success @extend% button; fundal: $ primar; Culoare: #fff; culoare frontală: $ primar - # 111;

Cu cât este mai mică culoarea scăzută, cu atât mai întunecată va fi umbra rezultată. Cu cât bricheta este mai adăugată, cu atât este mai ușoară umbra rezultată.

funcţii

Există un număr mare de funcții de utilizat: Funcții de număr, funcții de șir, funcții de listă, funcții de culoare și multe altele. Uitați-vă la lista lungă din documentația dezvoltatorului. Voi arunca o privire la un cuplu aici doar pentru a vă arăta cum funcționează.

uşura și întuneca funcția poate fi utilizată pentru a schimba lumina unei culori. Acest lucru este mai bine decât scăderea nuanțelor, face totul și mai modular și evident. Uitați-vă la exemplul nostru precedent folosind funcția de întunecare.

 $ primar: # 7EA800; .message-success @extend% button; fundal: $ primar; Culoare: #fff; culoare-culoare: întunecat ($ primar, 5);

Al doilea argument al funcției este procentul de întunecare necesar. Toate funcțiile au parametri; aruncați o privire la documentație pentru a vedea ce sunt! Iată câteva alte funcții de culoare cu auto-explicații: desaturate, satura, inversa, alb-negru.

tencui funcția, la fel ca în PHP, returnează un număr rotunjit la următorul număr întreg. Acest lucru poate fi folosit la calcularea lățimii coloanelor sau dacă nu doriți să utilizați o mulțime de zecimale în CSS finală.

 .titlu font-size: ceil ($ titlu_size * 1.3314);

Prezentare generală

Caracteristicile din Sass ne oferă o mare putere de a scrie mai bine CSS cu mai puțin efort. Folosirea corectă a amestecurilor, a extensiilor, a funcțiilor și a variabilelor va face foile noastre de stil mai ușor de întreținut, mai lizibile și mai ușor de scris.

Dacă sunteți interesat de un alt preprocesor CSS similar vă sugerăm să aruncați o privire la LESS (sau să citiți ghidul nostru de începători) - principalul element principal este la fel!