Preprocesoare. Prezentarea video a cursului „Sass and Less Preprocessors. Automatizarea și simplificarea dezvoltării front-end"

Preprocesorul CSS este un supliment CSS care oferă noi caracteristici și funcționalități CSS folosind sintaxa adăugată.

Scopul preprocesoarelor: de a oferi constructe sintactice convenabile pentru dezvoltatorul web pentru a simplifica și accelera dezvoltarea și întreținerea stilurilor în proiecte.

Preprocesoarele CSS fac codul scris folosind un limbaj de preprocesor curat și valid.

Cu ajutorul preprocesoarelor, codul tău scris devine: lizibil pentru om, structurat și logic, productiv.

Printre cele mai populare preprocesoare se numără Less, Sass (Scss), Stylus. De asemenea, instrumentele mai puțin vizibile în această zonă sunt Foile de stil de închidere, CSS Crush, acestea fiind mai puțin populare pe acest moment, dar totuși unii dezvoltatori le folosesc. Să încercăm să înțelegem capabilitățile și caracteristicile Less, Sass (Scss), Stylus.

Utilizarea standard CSS este destul de complexă. Sintaxa fără imbricare este direct dificilă pentru percepția vizuală. Absența variabilelor și funcțiilor normale face ca codul CSS să fie concentrat îngust și cu multe detalii inutile și inutile.

Documentatie disponibila - acum oricine poate stapani preprocesorul ales intr-un timp scurt, fara costuri suplimentare. Al doilea avantaj este ușurința de utilizare a preprocesoarelor. Pentru a face acest lucru, trebuie doar să instalați program special, care va monitoriza fișierele destinate preprocesorului și, atunci când se schimbă, va compila conținutul acestor fișiere în cod CSS pur.

Pentru utilizatorii mai avansați există constructori de proiecte speciali.

Less este cel mai popular și mai des folosit preprocesor. Dezvoltat pe baza JavaScript, include capabilități de preprocesor de bază, dar nu oferă constructe și bucle condiționate în sensul obișnuit. Datorită simplității și conciziei sale, are o sintaxă CSS standard și capacitatea de a extinde funcționalitatea prin utilizarea pluginurilor.

LESS oferă capabilități dinamice pentru CSS: variabile, Mixin, operații și funcții. Documentația este foarte prietenoasă cu dezvoltatorii și sintaxa este foarte asemănătoare cu CSS pur. Cadrele populare, cum ar fi Twitter Bootstrap, folosesc pe scară largă funcțiile LESS dinamice. Cu toate acestea, LESS face posibilă reutilizarea claselor ca mix-uri oriunde în foaia de stil.

Un alt preprocesor puternic și popular este Sass. O comunitate imensă de dezvoltatori s-a format în jurul acestui instrument. A fost fondat în 2007 ca modul pentru HAML și este scris în Ruby (oferă un port C++). Are o gamă largă de funcții în comparație cu Less. Preprocesorul își extinde funcționalitatea cu biblioteca Compass, ceea ce face posibilă depășirea cadru CSSși să lucreze la scară mai mare. Oferă două tipuri de sintaxă: Sass (Syntactically Awesome Style Sheets) este o sintaxă CSS mai simplă, bazată pe identitate. El este considerat mai mult versiune învechită. Scss (Sassy CSS) care se bazează pe sintaxa standard CSS.

– un preprocesor CSS destul de tânăr, dar deja promițător. Dezvoltat în 2010. Mulți îl consideră un preprocesor convenabil și extensibil și mai flexibil decât Sass. Dezvoltat în JavaScript. Există suport pentru multe opțiuni de sintaxă, de la cele asemănătoare CSS la cele mai simple și mai ușoare.

Instrumente utile pentru dezvoltatori:

• CodeKit: Compilează fișierele Sass, LESS și Stylus, apoi repornește automat browserul web când fișierele sunt actualizate. Aceasta include optimizarea imaginilor de proiect pentru a îmbunătăți performanța sistemului. Tehnologia este plătită, dar există și o versiune de probă cu care să lucrați.
• LiveReload: verifică dacă există modificări ale fișierelor, apoi le procesează și reîncarcă automat browserul web. Versiunea funcționează pentru Mac și Windows.
• Scout: Funcționează cu Sass și Compass într-un mediu Ruby. Funcționează pentru Mac și Windows.
• SimpLESS: Un compilator LESS CSS de bază și simplu pentru Mac și Windows.

Pentru a alege preprocesorul potrivit pentru munca dvs., încercați să utilizați mai multe. Și pe baza rezultatelor testelor, îți va fi mult mai ușor să faci alegerea. Și, de asemenea, nu uitați că atunci când stăpâniți preprocesorul, nu învățați o limbă nouă, ci doar sintaxă și capabilități noi. Company™ vă dorește o muncă plăcută în lumea CSS!

2545 ori 1 vizualizat ori astăzi

Și când acești dezvoltatori se vor calma în sfârșit și vor înceta să-i hărțuiască pe începători!? Înainte să am timp să înțeleg pe deplin CSS, mi-au spus: „Toți designerii de layout adevărați au trecut de mult la preprocesoare. Ei bine, ce fel de CSS pur este acesta în ajunul lui 2020!?” Ce să fac?

În primul rând, dezvoltatorii nu se vor opri niciodată să vină cu noi tehnologii. Și designerii profesioniști de layout le sunt foarte recunoscători pentru acest lucru. Limbajul tabelului Stiluri CSS, au fost inventate într-o perioadă în care site-urile web erau primitive. Dar, pe măsură ce anii au trecut, site-urile au devenit mai complexe și mai masive, dar metodele de aspect au rămas aceleași. Designerii de layout s-au săturat să scrie secțiuni similare de cod. A fost imposibil să schimbi rapid culoarea pe site. Era nevoie de o mai mare automatizare a aspectului și astfel au apărut preprocesoarele de cod CSS. Și astăzi vom vorbi despre unul dintre ele, preprocesorul LESS.

Compilarea codului LESS și VS

Tot ce aveți nevoie pentru a compila codul LESS este editorul de cod VS Code și extensia Easy Less. Cum functioneaza?

Creați un fișier de stil cu extensia .less

După salvare, un fișier .css va fi generat automat în același folder.

De fiecare dată când modificările sunt salvate, fișierele LESS sunt compilate în fișiere CSS. Browserele nu au învățat încă să înțeleagă LESS, au nevoie de cod CSS.

MAI puține variabile

Punem cele mai frecvent utilizate proprietăți în variabile. Site-ul folosește de obicei culori repetate și familii de fonturi. Punem toate culorile în variabile și apoi înlocuim în regulă nu codul de culoare, ci variabila. Întrebați: „Care este distracția? Încă trebuie să prescriu ceva, care este diferența?”

Caracteristica principală este schimbarea rapidă a culorii. Culoarea se schimbă o singură dată, într-o variabilă. Înlocuirea unei culori într-o variabilă va înlocui culoarea pe toate paginile site-ului. Această funcție este suficientă pentru a începe să utilizați LESS. Declarăm variabile în LESS și stocăm în ele valorile de care avem nevoie; dăm nume de variabile semnificative.

@primar: #194eb4;
@secundar: #f2b834;
@succes: #4cb514;
@negru: #000;
@alb: #fff;

Acum scriem cod normal, așa cum am făcut în CSS, dar în loc de valori înlocuim variabile.

MAI PUȚIN div(
umplutură: 0;

culoarea neagra;
}

După salvare, codul CSS este compilat. Nu atingem deloc fișierul CSS, toată munca se face în fișierul LESS. Puteți pune orice proprietăți repetate frecvent în variabile.

CSS div(
umplutură: 0;
familie de fonturi: Roboto, sans-serif;
culoare: #000;
) Mixine în LESS

Mixinele sunt utile pt reutilizare un set de proprietăți - cadre, butoane, titluri. Un set grupat de proprietăți care pot fi aplicate diferitelor selectoare.

Site-ul are mai multe butoane de același tip în culori diferite, dar cu aceleași proprietăți de font. Creăm un mixin care ajută la automatizarea procesului de creare a butoanelor.

Font_buton(

text-transform: majuscule;
dimensiunea fontului: 18px;
}

Adăugați un mixin la proprietățile selectorului de butoane.

Portfolio__button (
umplutură: 15px 80px;
culoare: #344258;
.button_font;
}

La ieșire obținem:

Portfolio__button (
umplutură: 15px 80px;
culoare: #344258;
familie de fonturi: „DIN Pro Bold”;
text-transform: majuscule;
dimensiunea fontului: 18px;
}

Simbol Ampersand

În loc să duplicăm numele selectorului, folosim simbolul ampersand.

Portfolio__item (
poziție: relativă;
culoare de fundal: #3c3c3c;
}
&:hover (
culoare de fundal: #ccc;
}
}

CSS.portfolio__item (
poziție: relativă;
culoare de fundal: #3c3c3c;
}
.portfolio__item:hover (
culoare de fundal: #ccc;
) Interogări media în LESS

Puteți scrie interogări media direct în interiorul selectorului.

MAI PUȚIN.header__title(
culoare: #344258;
dimensiunea fontului: 40px;

umplutură: 0 20px;
Ecran numai @media și (lățime maximă: 320 px)(
dimensiunea fontului: 22px;
}
} CSS.header__title(
culoare: #344258;
dimensiunea fontului: 40px;
familia de fonturi: „DIN Pro”, sans-serif;
umplutură: 0 20px;
}
Ecran numai @media și (lățime maximă: 320 px) (
.header__title(
dimensiunea fontului: 22px;
}
) Concluzie

Acest articol nici măcar nu acoperă 25% din toate funcțiile pe care le oferă LESS. Da, acest lucru nu este necesar, scopul articolului este de a motiva începătorii să înceapă să folosească preprocesoare. Începând cu cele mai simple, trecând treptat la cele mai complexe.

Procesul de scriere a HTML și CSS poate fi puțin copleșitor și necesită multe din aceleași sarcini din nou și din nou. Sarcini precum închiderea etichetelor în HTML sau căutarea monotonă a valorilor de culoare hexazecimale în CSS.

Astfel de sarcini diferite, de regulă, sunt mici și reduc ușor eficiența. Din fericire, acestea și alte câteva ineficiențe au fost recunoscute și contestate de preprocesori.

Un preprocesor este un program care preia un tip de date și îl convertește într-un alt tip de date. În cazul HTML și CSS, unele dintre cele mai populare limbaje de preprocesor sunt Haml și Sass. Haml este convertit în HTML și Sass este convertit în CSS.

De la începuturile lor, în rezolvarea unora dintre cele mai comune probleme, Haml și Sass au găsit multe modalități suplimentare pentru extindere capabilități HTMLși CSS. Nu numai prin eliminarea sarcinilor ineficiente, ci și prin crearea de metode care fac dezvoltarea site-ului web mai ușoară și mai logică. Preprocesoarele au devenit populare și datorită diferitelor cadre care le susțin; una dintre cele mai populare este Compass.

Haml

CodeKit acceptă și alte preprocesoare pe care le puteți găsi utile.

Doctype

Prima parte a scrierii unui document în Haml este să știi ce tip de doctype să folosești. Când lucrați cu documente HTML, tipul principal de document va fi HTML5. În Haml, tipurile de documente sunt definite prin trei semne de exclamare (!!!), urmate de ceva specific dacă este necesar.

Tipul de document implicit în Haml este HTML 1.0 Tranzițional. Prin urmare, pentru a face ca HTML5, trebuie să treceți numărul cinci după semnele exclamării (!!! 5).

HTML gata

Declarația elementelor

Una dintre caracteristicile definitorii ale Haml este sintaxa și modul de declarare și imbricare a elementelor. elemente HTML, conțin de obicei o etichetă de deschidere și de închidere, dar elementele Haml au doar o etichetă de deschidere. Elementele încep cu un semn de procent (%) și apoi indentarea determină imbricarea. Indentarea în Haml se poate face cu unul sau mai multe spații, dar este important ca indentarea să rămână aceeași. Filele și spațiile nu pot fi combinate și același număr de file sau spații trebuie să fie același în tot documentul.

Eliminarea necesității de deschidere și închidere a etichetelor și a structurii de indentare necesare creează un aspect care este ușor de urmărit. În orice moment, marcajul poate fi vizualizat și modificat rapid fără dificultate.

%body %header %h1 Bună lume! %section %p Lorem ipsum dolor sit amet.

HTML compilat

Salut Lume!

Lorem ipsum dolor sit amet.

Procesarea cuvântului

Textul din Haml poate fi plasat pe aceeași linie cu elementul declarat sau indentat sub element. Textul nu poate fi atât pe aceeași linie cu elementul declarat, cât și imbricat sub acesta; trebuie să existe una sau alta opțiune. Exemplul de mai sus poate fi rescris după cum urmează:

%body %header %h1 Bună lume! %section %p Lorem ipsum dolor sit amet.

Atribute

Atributele, ca și elementele, sunt declarate ușor diferit în Haml. Atributele sunt declarate imediat după element, în ondulat sau în paranteze, în funcție de dacă doriți să utilizați sintaxa Ruby sau HTML. Atributele de stil Ruby vor folosi sintaxa standard hash inside(), în timp ce atributele în stil HTML va folosi standard Sintaxa HTML interior ().

%img(:src => "shay.jpg", :alt => "Shay Hou") %img(src: "shay.jpg", alt: "Shay Hou") %img(src="shay.jpg" alt="Shay Hou") !}

HTML compilat

Clasele și legitimații

Dacă se dorește, clasele și identificatorii pot fi declarați ca și alte atribute, dar pot fi tratate ușor diferit. În loc să enumerați atributele de clasă și id cu valorile lor în paranteze, valoarea poate fi specificată direct după element. Folosind fie un punct pentru clase, fie un hash pentru identificator, o valoare poate fi adăugată imediat după element.

În plus, atributele pot fi amestecate prin unirea într-un format adecvat. Clasele trebuie separate prin puncte, iar alte atribute pot fi adăugate folosind unul dintre formatele prezentate anterior.

%section.feature %section.feature.special %section#hello %section#hello.feature(role="regiune")

HTML compilat

Clasele și identificatorii în

În cazul în care o clasă sau un identificator este folosit în , atunci %div poate fi omis și valoarea clasei sau identificatorului poate fi inclusă direct. Din nou, clasele ar trebui definite printr-un punct, iar identificatorii printr-un hash.

Lecție.minunoasă.lecție.de.începere

HTML compilat

Atribute booleene

Atributele booleene sunt tratate la fel ca și cum ar fi în Ruby sau HTML, în funcție de sintaxa utilizată.

%input(:type => „căsuță de bifare”, :checked => adevărat) %input(type="caseta de selectare" bifată=adevărat) %input(tip="caseta de selectare" bifată)

HTML compilat

Escape text

Unul dintre beneficiile lui Haml este capacitatea de a calcula și rula Ruby, dar aceasta nu este întotdeauna acțiunea dorită. Textul și liniile de cod pot fi eliminate folosind o bară oblică inversă (\), care permite ca textul să fie afișat în mod explicit fără execuție.

În exemplul de mai jos, primul model = @author este executat de Ruby, obținând numele autorilor din aplicație. Al doilea model începe cu o bară oblică inversă care iese din text și este tipărit așa cum este, fără execuție.

Autor = @autor \= @autor

HTML compilat

Shay Hou = @autor

Alternative de evadare a textului

Uneori, evadarea textului nu este suficientă și Ruby este necesar pentru a genera rezultatul dorit. Un exemplu popular pentru aceasta este încercarea de a include o perioadă imediat după un link, dar nu ca parte a textului linkului. Pune un punct pe linie nouă nu este acceptabil deoarece va fi considerat ca valoare goală clasa, provocând o eroare de compilare. Adăugarea unei bare oblice inverse înainte ca punct să scape caracterului, dar pune un spațiu între ultimul cuvânt și punct. Din nou, nu produce rezultatul dorit.

În aceste cazuri, ajutorul Ruby este util. Exemplul de mai jos folosește ajutorul pentru a plasa un punct imediat după ultimul cuvânt, dar în afara textului linkului.

%p Shay - = reușește "." face %a(:href => "#") bine făcut

HTML compilat

Shay - Bine făcut.

Comentarii

La fel ca elementele și atributele, comentariile sunt tratate ușor diferit în Haml. Codul poate fi comentat simplu folosind o singură bară oblică (/). Liniile simple pot fi comentate folosind o bară oblică la începutul unei linii, iar blocurile de cod pot fi comentate prin imbricare sub o bară oblică.

%div / Linia de comentarii Linia curentă / %div Bloc comentat

HTML compilat

Linia curentă

Comentarii condiționate

Comentariile condiționate sunt, de asemenea, tratate diferit în Haml. Pentru a crea un comentariu condiționat, utilizați paranteza patrata() în jurul stării. Aceste paranteze pătrate trebuie plasate imediat după bară oblică.

/ %script(:src => "html5shiv.js")

HTML compilat

Comentarii linistite

Haml oferă, de asemenea, posibilitatea de a crea comentarii speciale silențioase. Comentariile silențioase diferă de comentariile HTML de bază prin aceea că, odată compilate, orice conținut dintr-un comentariu silențios este complet eliminat din pagina respectivă și nu apare în rezultate. Comentariile silențioase încep cu o cratimă, urmată de un hash (-#). Ca și în cazul altor comentarii, comentariile silențioase pot fi folosite pentru a elimina una sau mai multe rânduri folosind imbricarea.

%div -# Linie ștearsă Linia curentă

HTML compilat

Linia curentă

Filtre

Haml oferă mai multe filtre care vă permit să utilizați diferite tipuri de intrare în Haml. Filtrele încep cu două puncte, urmate de numele filtrului, de exemplu :markdown, cu tot conținutul pentru a filtra atașamentul de sub el.

Filtre comune

Mai jos sunt câteva filtre comune, inclusiv cele mai populare: css și: javascript.

• :cdata
• :cafea
• :a scapat
• :javascript
• :Mai puțin
• :markdown
• :maruku
• :simplu
• :conservare
• :rubin
• :sss
• :scss
• :textil

filtru Javascript

:javascript $(„buton”).on(„clic”, function(eveniment) ( $(„p”).hide(„lent”); ));

HTML compilat

$(„buton”).on(„clic”, function(eveniment) ( $(„p”).hide(„lent”); ));

Filtre CSS și Sass

:css .container (marja: 0 automat; lățime: 960px; ) :sass .container margin: 0 lățime automată: 960px

HTML compilat

.container ( marjă: 0 auto; lățime: 960px; )

Interpolare rubin

După cum am menționat mai devreme, Haml poate evalua Ruby și, uneori, pot exista cazuri în care Ruby trebuie evaluat în text simplu. În acest caz, Ruby trebuie interpolat prin împachetarea codului necesar în Ruby.

Mai jos este un exemplu Ruby care este interpolat ca parte a unui nume de clasă.

%div(:class => "student-#(@student.name)")

HTML compilat

SCSS și Sass

SCSS și Sass sunt limbaje de preprocesare care se compilează în CSS. Sunt un pic ca Haml și facilitează scrierea codului, oferind în același timp foarte puține controale. Individual, SCSS și Sass au aceleași origini, dar din punct de vedere tehnic au o sintaxă diferită.

Din motive de concizie, Haml și Sass au fost singurii preprocesoare acoperite în acest tutorial. De asemenea, au fost aleși pentru că sunt construite folosind Ruby și se potrivesc direct în aplicațiile Ruby on Rails. De asemenea, au primit un sprijin extraordinar din partea comunității.

Când vine vorba de alegerea preprocesorului de utilizat, este important să luați în considerare ce este mai bine pentru echipa și proiectul dvs. Proiectele construite în Node.js pot beneficia probabil mai mult de Jade și Stylus. Cel mai important aspect de luat în considerare, însă, este ceea ce echipa ta este obișnuită să folosească. Faceți-vă cercetarea pentru fiecare proiect și alegeți cea mai informată soluție.

Resurse și link-uri

• Haml - HTML Abstraction Markup Language
• Sass - Foi de stil sintactic minunate
• Sass Playground pe SassMeister

Aveti vreo intrebare?

Implementarea unui layout de designer este imposibilă fără utilizarea HTML și CSS. Dacă un limbaj de marcare ne permite să schițăm un șablon cu elementele necesare, atunci CSS transformă acest șablon în tipul potrivit, ca în sursă. S-ar părea că cu ajutorul CSS pur puteți face pagina așa cum și-a dorit clientul.

Cu toate acestea, dacă cineva deschide un singur fișier CSS și încearcă să modifice ceva, sunteți sigur că codul va fi lizibil, editabil, structurat și de înțeles? Dacă proiectul tău este imens, cu multe părți, ești sigur că îl poți susține cu ușurință în viitor? Dacă utilizați un preprocesor CSS, atunci răspunsul este da și, în plus, aceasta este o modalitate de a automatiza aspectul site-ului. De ce? Vom afla acum.

Ce este un preprocesor CSS?

Din punctul meu de vedere, acesta este un add-on la CSS standard care extinde capacitățile standard, adaugă unele funcții și vă permite să scrieți cod mai ușor de citit și de înțeles. La iesire sursă Compilează în CSS-ul cu care suntem obișnuiți. Utilizarea unui astfel de instrument în dezvoltarea modernă este un „must have” și sfătuiesc fiecare designer sau dezvoltator de layout să se familiarizeze cu el. Trebuie adăugat că există multe dintre care să alegeți, pentru că există destul de multe preprocesoare CSS, dar trebuie evidențiate cele mai populare:

• Stylus

Toate preprocesoarele de mai sus au o funcționalitate aproape identică, există doar mici diferențe de sintaxă. Acum, să revenim la întrebarea ridicată mai devreme: ce avantaje ne oferă preprocesoarele pentru a face codul nostru mai convenabil și mai ușor de întreținut? Aceasta este, în primul rând, cuibărirea. Această caracteristică ne oferă posibilitatea de a structura elemente, de a găsi cu ușurință părintele unui element, de a scrie rapid pseudo-clase și pseudo-elemente și chiar de a folosi BEM! De exemplu:
.urmări
culoare: #fff
&__titlu
umplutură: 10px
&:hover, &:focus
Culoarea albastra

Aruncă o privire la acest fragment de cod scris în Sass. Toate acestea se traduc în următorul CSS:

Piesa (culoare: #FFF;)
.track__title ( umplutură: 10px;)
.track__title:hover, .track-title:focus (culoare: albastru)

Laconic, convenabil, de înțeles, structura de la părinte la copil este grozavă, nu-i așa? Al doilea avantaj, și nu mai puțin important, îl reprezintă variabilele. Principiul funcționării lor este extrem de simplu: numele variabilei începe cu simbolul $ și apoi numele în sine. Scriem valoarea prin două puncte - aceasta poate fi o culoare în orice formă convenabilă, valori de indentare, lățime, dimensiune font și așa mai departe. Ca rezultat, vom obține ceva de genul acesta:

$btn-culoare: albastru;
$font-main-size: 16px;

Și utilizarea va arăta astfel:

Bloc (
dimensiunea fontului: $font-main-size;
}

Imaginează-ți cât de convenabil este. Dacă trebuie să schimbați culoarea butoanelor pe tot site-ul, atunci trebuie să o faceți doar într-un singur loc! Ei bine, hai să mergem mai departe. Al treilea și cel mai mare lucru pe care ni-l pot oferi preprocesoarele CSS este utilizarea mixin-urilor. În înțelegerea noastră obișnuită, mixin-urile sunt funcții care pot fi utilizate de mai multe ori fără a repeta aceleași părți ale codului (amintiți-vă unul dintre principiile de programare - DRY - Nu vă repetați). Sincer să fiu, nu folosesc mixin-uri foarte des, se pare că nu era o nevoie atât de urgentă, dar voi arăta în continuare câteva exemple. Una dintre funcțiile pe care le folosesc cel mai mult este următoarea:

@function em($pixeli, $context: $browser-context) (
@dacă (fără unitate ($pixeli)) (
$pixeli: $pixeli * 1px;
}
@dacă (fără unitate ($context)) (
$context: $context * 1px;
}
@return $pixeli / $context * 1em;
}

Și aplicarea sa este după cum urmează:

corp (
dimensiunea fontului: em(14px);
}

Da, după cum ați înțeles, aceasta este doar o conversie a mărimii fontului de la PX la Em (trăiască zilele când pentru astfel de lucruri mărunte foloseai servicii speciale sau le calculai singur la calculator). Următorul exemplu economisește, de asemenea, mult timp:

@mixin substituent de intrare (
&.substituent ( @conținut; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Utilizările sale:

intrare, zona text (
@include substituent de intrare (
culoare: $gri;
}
}

Există multe alte exemple care pot fi date, cu toate acestea, merită să începeți să utilizați mixin-uri pentru a înțelege cât de util este acest instrument. Poate mai există un motiv care te va face să te îndrăgostești de preprocesoarele CSS, iar numele său este modularitate. Este 2018, iar modularitatea este peste tot - de la motoarele de șabloane HTML la diverse cadre CSS și constructori de proiecte.

CSS modern este puternic și, în combinație cu preprocesoare, este în general o mașină de luptă pentru proiectarea conținutului pe pagini. Articolul oferă un ghid extins pentru Sass/SCSS cu exemple. După ce ați citit acest lucru, veți învăța cum să utilizați mixuri, variabile și directive pentru a vă oferi și mai mult control asupra stilurilor dvs.

Notă Tot codul Sass/SCSS este compilat în CSS, astfel încât browserele să îl poată înțelege și să-l afișeze corect. În prezent, browserele nu acceptă lucrul direct cu Sass/SCSS sau orice alt preprocesor CSS, dar standardul Specificația CSS nu oferă o funcționalitate similară.

De ce să folosiți Sass/SCSS în loc de CSS?

Cuibărire- SCSS permite imbricarea Reguli CSS unul în celălalt. Regulile imbricate sunt aplicate doar pentru elementele care se potrivesc cu selectoare externe (și dacă vorbim de Sass, atunci totul este frumos și intuitiv acolo chiar și fără paranteze).

Variabile- CSS standard are și conceptul de variabile, dar în Sass poți lucra cu ele puțin diferit. De exemplu, repetați-le prin directiva @for. Sau generați proprietăți în mod dinamic. Puteți studia mai multe pe site-ul web al proiectului în limba rusă.

Operații de matematică îmbunătățite- puteți adăuga, scădea, înmulți și împărți valori CSS. Spre deosebire de CSS standard, Sass/SCSS vă permite să faceți fără calc() .

Trigonometrie- SCSS vă permite să scrieți propriile funcții (sinus și cosinus) folosind doar sintaxa Sass/SCSS, similar cu modul în care o puteți face în alte limbi precum JavaScript.

Directive@pentru , @while și expresie@if-else - Puteți scrie cod CSS folosind elemente familiare din alte limbi. Dar nu vă lăsați păcăliți - în cele din urmă rezultatul va fi CSS simplu.

Mixine (mixine)- puteți crea un set de proprietăți CSS o dată și puteți lucra cu ele în mod repetat sau le puteți amesteca cu alte valori. Mixinurile pot fi folosite pentru a crea teme separate ale aceluiași aspect. Mixins poate conține, de asemenea, reguli CSS întregi sau orice altceva permis într-un document Sass. Ei pot accepta chiar și argumente, permițându-vă să creați o mare varietate de stiluri cu un număr mic de mix-uri.

Funcții- Puteți crea definiții CSS ca funcții pentru reutilizare.

Preprocesor Sass

Sass nu este dinamic. Nu veți putea genera și/sau anima proprietăți și valori CSS în timp real. Dar puteți crea mai multe dintre ele mod eficientși lăsați proprietățile standard (cum ar fi animația CSS) să le împrumute de acolo.

Sintaxă

SCSS nu adaugă cu adevărat nicio caracteristică nouă la CSS, în afară de o nouă sintaxă care reduce adesea timpul de codare.

Cerințe preliminare

Există 5 preprocesoare CSS: Sass, SCSS, Less, Stylus și PostCSS.

Acest articol acoperă în mare parte SCSS, care este similar cu Sass. Puteți citi mai multe despre aceste preprocesoare pe Stack Overflow (original) sau pe qaru (traducere în rusă).

SASS  -  (.sass) S yntactic A wesome S tyle S sheets.

SCSS  -  (.scss) Sass y C ascading S tyle S sheets.

Extensiile .sass și .scss sunt similare, dar tot nu sunt la fel. Pentru fani Linie de comanda Iată metoda de conversie:

# Convertiți din Sass în SCSS $ sass-convert style.sass style.css # Convertiți din SCSS în Sass $ sass-convert style.scss style.sass

Sass este prima specificație pentru SCSS cu o extensie de fișier .sass. Dezvoltarea sa a început în 2006, dar mai târziu a fost dezvoltată o sintaxă alternativă cu extensia .scss.

Vă rugăm să rețineți. Alte preprocesoare au funcționalități similare cu SCSS, dar sintaxa poate diferi. De asemenea, tot ceea ce funcționează în CSS va funcționa perfect și în Sass și SCSS.

Variabile

Sass/SCSS vă permite să lucrați cu variabile. În CSS sunt notate cu o liniuță dublă (--), iar în preprocesoare sunt reprezentate printr-un semn dolar ($).

$numar: 1; $culoare: #ff0000; $text: „tproger pentru totdeauna.”; $text: „IT pentru totdeauna”. !Mod implicit; $nimic: nul;

Puteți atribui o valoare implicită variabilelor care nu au încă o valoare adăugând eticheta !default la sfârșitul valorii. În acest caz, dacă variabilei i s-a atribuit deja o valoare, aceasta nu se va modifica; dacă variabila este goală, i se va atribui noua valoare specificată.

#container (conținut: $text; )

Variabilele din Sass pot fi atribuite oricărei proprietăți.

Reguli imbricate

Elemente CSS imbricate standard folosind spații albe:

/* Reguli imbricate */ #A (culoare: roșu; ) #A #B (culoare: verde; ) #A #B #C p (culoare: albastru; )

Aceleași elemente imbricate folosind SCSS:

/* Reguli imbricate */ #A (culoare: roșu; #B (culoare: verde; #C p (culoare: albastru; ) ) )

După cum puteți vedea, sintaxa pare mai curată și mai puțin repetitivă.

Acest lucru este util în special atunci când gestionați aspecte supraîncărcate. În acest fel, alinierea în care proprietățile imbricate sunt scrise în cod se potrivește îndeaproape cu structura reală de aspect a aplicației.

În culise, preprocesorul încă îl compilează în codul CSS standard (arat mai sus), astfel încât să poată fi redat în browser. Schimbăm doar modul în care scriem CSS.

Ampersand #p (culoare: negru; a (greutatea fontului: bold; &:hover (culoare: roșu; ) ) )

Cu caracterul & puteți specifica în mod explicit unde trebuie inserat selectorul părinte.

Rezultatul compilării Sass (din exemplul anterior) în CSS este mai jos.

#p (culoare: negru;) #p a (greutatea fontului: bold;) #p a:hover (culoare: roșu;)

Ca rezultat, ampersand a fost compilat în numele elementului părinte a (a:hover).

Mixine (denumite și impurități)

Mixinele pot conține, de asemenea, selectori, inclusiv cei cu proprietăți. Și selectoarele pot conține referințe la elementul părinte prin ampersand (&), vă amintiți despre asta, nu?

Exemplu de lucru cu mai multe browsere

Unele lucruri în CSS sunt destul de plictisitoare de scris, mai ales în CSS3, unde, pe deasupra, de multe ori trebuie să utilizați un număr mare de prefixe de furnizor (-webkit- sau -moz-).

Mixins vă permit să creați grupuri de declarații CSS pe care le veți folosi de mai multe ori pe site-ul dvs. O bună practică ar fi utilizarea mixin-urilor pentru prefixele de furnizor. Exemplu:

@mixin border-radius($radius) ( // Prefixe pentru: -webkit-border-radius: $radius; // Chrome și Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $raza; // Internet Explorer-o-border-radius: $raza; // Opera border-radius: $radius; // CSS standard ) // Exemplu de utilizare a mixin-ului border-radius după crearea lui.box ( @include border-radius(10px); )

Operatii aritmetice

Ca în viata reala, nu puteți lucra cu numere care au tipuri de date incompatibile (de exemplu, adăugarea px și em).

Adunarea și scăderea p ( dimensiunea fontului: 10px + 2em; // EROARE! dimensiunea fontului: 10px + 6px; // 16px dimensiunea fontului: 10px + 2; // 12px )

Acordați întotdeauna atenție tipului de date adăugate. Adică pixeli în pixeli, elefanți în elefanți. Scăderea funcționează în același mod, dar cu semnul minus.

Exemplu de scădere:

Multiplicare

Efectuat exact ca în CSS, folosind calc(a * b), dar fără calc și paranteze. În plus, puteți separa și semnul înmulțirii cu spații de numere (5*6 == 5 * 6).

Excepție Nu puteți înmulți pixelii între ei. Adică 10px * 10px != 100px . 10px * 10 == 100px .

P ( lățime: 10px * 10px; // EROARE! lățime: 10px * 10; // 100px lățime: 1px * 5 + 5px; // 10px lățime: 5 * (5px + 5px); // 50px lățime: 5px + ( 10px / 2) * 3; // 20px )

Divizia

Cu împărțirea, lucrurile sunt puțin mai complicate, dar vă puteți da seama, deoarece în CSS standard bara oblică este rezervată pentru utilizarea unei forme scurte de notare a proprietăților. Exemplu de mai jos.

/* formă scurtă pentru scrierea proprietăților */ font: italic bold .8em/1.2 Arial, sans-serif; /* forma standardînregistrări de proprietate */ font-style: italic; greutate font: bold; dimensiunea fontului: .8em; înălțimea liniei: 1,2; familie de fonturi: Arial, sans-serif;

Există trei ajutoare care vor sugera posibilitatea divizării:

Valoarea (sau orice parte a acesteia) este stocată într-o variabilă sau returnată de o funcție.

Valorile sunt cuprinse între paranteze.

Valoarea este utilizată ca parte a unei alte expresii aritmetice.

$var1: 20; $var2: 4; p ( sus: 16px / 24px; // Afișează neschimbat în CSS standard de sus: (20px / 5px); // Împarte (dar numai când se utilizează paranteze) de sus: #($var1) / #($var2); // Ieșiri ca cod CSS obișnuit, nu se efectuează nicio divizare în partea de sus: $var1 / $var2; // Diviziunea este efectuată sus: aleatoriu(4) / 5; // Diviziunea este efectuată (dacă este utilizată împreună cu funcția) sus: 2px / 4px + 3px; // Diviziunea este efectuată dacă se adaugă o altă operație aritmetică)

Rezultatul compilației în CSS:

P ( sus: 16 px / 24 px; sus: 4; sus: 20 / 4; sus: 5; sus: 0,6; sus: 3,5 px; )

Rest

Restul calculează restul unei operații de divizare. Mai jos vom vedea cum să creați o „zebră” pentru o listă HTML.

@mixin zebra() ( @for $i de la 1 la 7 ( @if ($i % 2 == 1) ( .stripe-#($i) (culoare de fundal: negru; culoare: alb; ) ) ) ) * ( @include zebra(); text-align: center; )

Crearea mixinului zebră este prezentată în codul încorporat de mai sus. Directivele @for și @if sunt descrise în secțiunea de mai jos.

Pentru a crea un eșantion, trebuie să scrieți mai multe elemente HTML.

zebra zebra zebra zebra zebra zebra zebra

Rezultat în browser:

Zebra generată cu succes de mixin zebra

Operatori de comparație

Directiva @if preia o expresie SassScript și își folosește stilurile imbricate dacă expresia returnează altceva decât false sau null .

Următoarele arată cum funcționează directivele @if și @else atunci când sunt imbricate într-un mixin.

@mixin spacing($padding, $margin) ( @if ($padding > $margin) ( padding: $padding; ) @else (padding: $margin; ) .container ( @include spacing(10px, 20px); )

Comparația în acțiune. Mixul de spațiere va selecta dimensiunile de umplutură dacă este mai mare decât marginea.

După compilare în CSS:

Container ( umplutură: 20px; )

Operatori logici

Descrierea operatorilor logici

Utilizarea operatorilor logici Sass pentru a crea un buton care are un fundal care se modifică în funcție de lățimea acestuia.

@mixin butonul-culoare ($înălțime, $lățime) ( @if (($înălțime< $width) and ($width >= 35px)) (culoare de fundal: albastru; ) @else (culoare de fundal: verde; ) .button ( @include button-color(20px, 30px) )

Siruri de caractere

CSS definește 2 tipuri de șiruri: cu și fără ghilimele. Sass le recunoaște pe amândouă. Ca rezultat, veți ajunge cu același tip de șiruri în CSS pe care le-ați folosit în Sass.

În unele cazuri, puteți adăuga șiruri la valorile CSS valide fără ghilimele, dar numai dacă șirul adăugat este un element final.

P ( font: 50px Ari + "al"; // Compilează la 50px Arial )

Exemplul de mai jos demonstrează ce nu trebuie făcut.

P ( font: "50px" + Arial; // EROARE! )

Puteți adăuga linii tipuri diferite, dacă nu există spații în ele. Exemplul de mai jos nu se va compila.

P:după (conținut: „Aduceți înapoi Linus” + Torvalds!; // EROARE! )

P:după (conținut: „Aduceți înapoi Linus” + „Torvalds!”; // acordați atenție „Torvalds!” )

Exemplu de adăugare a mai multor șiruri de caractere:

P:după (conținut: „Destinul „ + „umanității” + „-” + „iterație.”; )

Adăugarea de șiruri și numere:

P:după (conținut: „Recursie” + 2013 + „destinul cereștilor”; )

Vă rugăm să rețineți: proprietatea de conținut funcționează numai cu pseudoselectorii:before și:after. Este recomandat să nu folosiți conținutul într-un document CSS, ci să îl utilizați direct între etichete în HTML.

Operatori de control al firelor

SCSS are funcții (funcntion()) și directive (@directive). Puțin mai sus, ne-am uitat deja la un exemplu de funcție când am studiat transmiterea argumentelor în interiorul mixin-urilor.

Funcțiile sunt de obicei incluse în paranteze imediat după numele lor. Și directiva începe cu simbolul @.

La fel ca JavaScript, SCSS vă permite să lucrați cu un set standard de operatori de control al fluxului.

dacă()

if() este o funcție (și uneori baza inteligenței artificiale).

Utilizarea sa pare destul de primitivă: operatorul va returna una dintre cele două valori indicate în condiție.

/* Folosind funcția if() */ if (true, 1px, 2px) => 1px; dacă (fals, 1px, 2px) => 2px;

@dacă

@if este o directivă folosită pentru ramificarea condiționată.

/* Folosind directiva @if */ p ( @if 1 + 1 == 2 ( chenar: 1px solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Rezultatul compilației:

P (chenar: 1px solid; )

Mai jos este o furcătură combinată cu adăugarea directivei @else.

/* Creați o variabilă $type */ $type: river; /* Colorează containerele cu albastru dacă valoarea variabilei $type este river */ div ( @if $type == river ( culoare: albastru; ) ) /* Culori condiționate pentru textul din etichetă

*/ p ( @if $tip == arbore (culoare: verde; ) @else dacă $tip == râu (culoare: albastru; ) @else dacă $tip == murdărie (culoare: maro; ) )

Verificarea prezenței unui element părinte

Ampersand selectează elementul părinte dacă există unul. În caz contrar, va returna null. Prin urmare, poate fi utilizat împreună cu directiva @if.

În următoarele exemple, ne vom uita la crearea de stiluri CSS condiționate în funcție de prezența unui element părinte.

/* Verificați dacă există un element părinte */ @mixin does-parent-exist ( @if & ( /* Aplică o culoare albastră elementului părinte dacă există */ &:hover ( culoare: albastru; ) ) @else ( /* Elementul părinte lipsește, aplică culoarea albastră la linkuri */ a (culoare: albastru; ) ) )

@pentru directivă

Directiva @for tipărește un set de stiluri de un număr specificat de ori. Pentru fiecare iterație, o variabilă contor este utilizată pentru a modifica rezultatul.

Directiva @for este repetată de 5 ori.

@pentru $i de la 1 la 5 ( .definiție-#($i) ( lățime: 10px * $i; ) )

Rezultatul compilației în CSS:

Definition-1 ( lățime: 10px; ) .definition-2 ( lățime: 20px; ) .definition-3 ( lățime: 30px; ) .definition-4 ( lățime: 40px; ) .definition-5 ( lățime: 50px; )

@fiecare directivă

Directiva @each setează $var la fiecare dintre valorile din listă sau dicționar și scoate stilurile pe care le conține folosind valoarea $var corespunzătoare.

@fiecare $animal în ornitorinc, leu, oaie, porumbel ( .#($animal)-pictogramă ( imagine de fundal: url("/images/#($animal).png") ) )

Rezultatul compilației în CSS:

Pictogramă Platypus ( imagine de fundal: url("/images/platypus.png"); ) .pictogramă-leu ( imagine de fundal: url("/images/lion.png"); ) .pictogramă-oaie (pictogramă-de fundal- imagine: url("/images/sheep.png"); ) .dove-pictogramă ( imagine de fundal: url ("/images/dove.png"); )

directiva @while

Directiva @while preia o expresie SassScript și parcurge stilurile pe care le conține, în timp ce expresia este evaluată la true . Poate fi folosit pentru a crea bucle mai complexe decât este potrivit pentru @for, deși este rareori necesar. De exemplu:

$index: 5; @while $index > 0 ( .element-#($index) ( lățime: 10px * $index; ) $index: $index - 1; )

Rezultatul compilației:

Element-5 ( lățime: 50px; ) .element-4 ( lățime: 40px; ) .element-3 ( lățime: 30px; ) .element-2 ( lățime: 20px; ) .element-1 ( lățime: 10px; )

Funcții în Sass/SCSS

Folosind Sass/SCSS puteți utiliza funcțiile în același mod ca în alte limbi.

Să creăm o funcție trei-sute-px() care returnează 300px.

@function three-hundred-px() ( @return 300px; ) .name ( lățime: trei-sute-px(); chenar: 1px gri solid; afișare: bloc; poziție: absolut; )

După aplicarea class.name, lățimea elementului va fi de 300 de pixeli.

Buna ziua.

Funcțiile din Sass pot returna orice valoare CSS validă și pot fi atribuite oricărei proprietăți. Ele pot fi chiar calculate pe baza argumentului transmis.

@function double($width) ( @return $width * 2; )

Trigonometrie

Funcțiile trigonometrice sin() și cos() sunt adesea găsite ca clase încorporate în multe limbi, cum ar fi JavaScript, de exemplu.

Munca lor merită studiată dacă doriți să reduceți timpul petrecut cu dezvoltarea animațiilor interfața cu utilizatorul, de exemplu pentru a crea un trobber. Apropo, despre asta am vorbit deja într-unul dintre articole. Dar în acest caz va fi cod, nu o imagine GIF inserată într-un document HTML.

Mai jos ne vom uita la câteva exemple pentru crearea de efecte de animație interesante folosind funcția sin(), în care cantitatea de cod este menținută la minimum. Apoi puteți scala aceste cunoștințe pentru a crea elemente interactive de interfață cu utilizatorul (mișcare în cerc, animație ondulată).

Avantajul utilizării trigonometriei în combinație cu CSS este că nu există solicitări HTTP suplimentare, așa cum există în cazul imaginilor gif.

Puteți scrie funcții trigonometrice în Sass. Citiți mai multe despre asta.

Scrierea propriilor funcții

În trigonometrie, multe operații se bazează pe funcții. Fiecare funcție se bazează pe cealaltă. De exemplu, funcția rad() necesită utilizarea lui PI() . Funcțiile cos() și sin() necesită utilizarea rad() .

@funcția PI() ( @return 3.14159265359; )

Scrierea funcțiilor în Sass/SCSS este foarte asemănătoare cu funcțiile de scriere în alte limbi.

Folosind funcția pow():

@funcție pow ($număr, $exp) ( $valoare: 1; @dacă $exp > 0 ( @pentru $i de la 1 la $exp ( $valoare: $valoare * $număr; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Folosind funcția rad():

@function rad ($unghi) ( $unitate: unitate ($unghi); $unitless: $unghi / ($unghi *0 + 1); //Dacă valoarea unghiului este în grade ("deg"), trebuie convertit la radiani @dacă $unitate == grade ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

Pentru a calcula tangenta folosind funcția tan(), trebuie să utilizați funcțiile sin() și cos().