Od autora: Prije svega, što je pretprocesor? Ukratko, predprocesor je program koji modificira podatke kako bi odgovarali ulaznim zahtjevima drugog programa. CSS predprocesori su skriptni jezik koji proširuje mogućnosti uobičajenog CSS-a s varijablama, pravilima ugniježđivanja, funkcijama i logičkim blokovima.

Zašto bih ga trebao koristiti?

Često ćete se naći u situaciji da morate koristiti ista vrijednost za konkretnu nekretninu u razna mjesta. Na primjer, prvo ste naveli crvenu kao primarnu boju stranice. Zatim ga trebate promijeniti u zeleno.

S varijablama ne morate pretraživati ​​i mijenjati svako spominjanje crvene boje u stilovima. Jednom definirate vrijednost varijable, na primjer "primarna boja", a zatim tu varijablu koristite kao vrijednost.

Vrijednost primarne boje mijenja se na jednom mjestu. Također možete uvoziti CSS datoteka iz drugih izvora bez razmišljanja o broju mrežnih zahtjeva, budući da se svi mogu kombinirati u jednu datoteku prije kompilacije.

Zahvaljujući ugniježđenoj prirodi CSS predprocesora, dobit ćete kompaktan kod s istim rezultatom. LESS i SCSS temelje se na principu DRY, što znači "Ne ponavljaj se" ili "ne ponavljaj se".

Pretprocesori. Brzi početak

Što nije u redu s MANJE?

Mreža je već puna rasprava o tome što je bolje: LESS ili SCSS. Stoga neću detaljno obrađivati ​​obje teme. Umjesto toga, govorit ću o malim problemima koje sam imao s LESS-om.

SCSS koristi simbol $ za definiranje varijabli, dok LESS koristi simbol @. Budući da CSS također koristi simbol @ za medijske upite, uvoze i animacije ključnih kadrova, to može biti zbunjujuće za programere.

Simbol $ se ne koristi u CSS-u. Simbol @ prisutan je u SCSS-u, ali se koristi za direktive @if, @else, @each, @for i @while.

Iako ovaj scenarij nije realan za sve, bolje je koristiti različite ID-ove za odvajanje elemenata.

SCSS podržava tradicionalno logički izrazi poput if/else, blokovi i petlje. Zaštićeni miksini u LESS-u lakši su za oko, ali ih je teže razumjeti.

Može se koristiti LESS...

...ili samo koristeći SCSS.

LESS definira samo jedan čuvani mixin. Stoga ne možete jednostavno proslijediti drugi argument i obraditi ga u istom mixinu, duplicirajući kod za sve moguće scenarije. Zapravo, MANJE (manje) je više (namjera igre).

Znam da je moguće skratiti kod korištenjem proširenih vrijednosti kao naziva svojstava za ovaj slučaj, ali problem je u tome što ne mogu uvjetno mapirati dva različita dijela istog miksina u LESS.

Ima još glavobolja s ovim kodom...

Pretprocesori. Brzi početak

Naučite osnove rada sa Manje pretprocesora i Sass sa potpuna nula za manje od 2 tjedna

... nego s ovim.

Da bih postigao isti rezultat s LESS-om, morao sam unaprijed definirati sve, napisati mixin, dobiti poziciju indeksa, ponavljati to svojom logikom dok vrijednost indeksa ne bude jednaka nuli, i ručno pozovite mixin.

Iako je ovo moje osobno mišljenje, mislim da SCSS općenito bolje obrađuje računske vrijednosti i matematičke vrijednosti.

Što nije u redu s tim?

LESS je, s druge strane, mnogo složeniji. Na primjer, kada ga koristim, ne pokušavam raditi kalkulacije. Ali čak i da jesam, otkad je 100% minus 50px jednako 50%?

MANJE, zašto zanemarujete vrijednosti s jedinicama promjene?

Zašto me tjeraš da učim tvoje štake kad već znam CSS?

I još nešto za kraj. Zahvaljujući projektu LibSass, SCSS ima mnogo omotača za druge jezike, kao što su C, Go, PHP, Python, Dart itd.

Zašto smo odlučili napustiti LESS u korist SCSS-a?

Dok smo razvijali JotForm kartice, morali smo prethodno obraditi varijabilne vrijednosti - prethodno kompajliranje i predmemoriju na strani poslužitelja u isto vrijeme; i sve je to moralo biti izvedeno savršeno.

Željeli smo da se korisnici mogu prilagoditi izgled oblicima Tako da se sve promjene trenutno i istovremeno prikazuju i pohranjuju u predmemoriju na poslužitelju. Zbog dobrobiti naših korisnika, nismo htjeli pokrenuti LESS klijentsku ljusku jer bi to zahtijevalo računalna snaga klijent - i mnogo toga može poći po zlu.

Nismo započeli razvojni ciklus s ciljem prelaska s LESS na SCSS. Ali na pola puta rješavanja ovih manjih problema, nedostatak pristojnog omota za LESS bila je kap koja je prelila čašu.

Međutim, razlike između LESS i SCSS manje su važne od onoga što im je zajedničko. Na kraju, nije važno koji pretprocesor koristite, sve dok ga koristite.

Pokušavate upravljati ogromnim projektom s jednom CSS datotekom i tradicionalnim CSS struktura mnogo teže od korištenja predprocesora s nekoliko problema.

Koji su glavni zadaci pretprocesora i koji odabrati: SASS ili LESS, raspravljat ćemo u ovom članku. Prvo morate definirati pretprocesor - što je to? To je alat ili alat koji modificira određeni kod transformirajući ga kroz različite mogućnosti. Ulaz procesora je kod koji je opisan raznim sintaktičkim strukturama. Ovi dizajni su razumljivi samo ovom instrumentu. Može zamijeniti različite složene jezične konstrukcije ili, naprotiv, dodati nove. Izlaz iz programa je kod od više od Niska kvaliteta s uklonjenim strukturama.

Za bolje razumijevanje pojma pretprocesor, pogledajmo primjer. Ulaz ovog programa je kod koji sadrži razne riječi, probleme, zareze i točke. Ako postoji funkcija zamjene ključna riječ u svom kratkom obliku, odnosno u skraćenici, do punog imena, tada će izlaz biti rečenica s proširenim zapisom. Ovo je najprimitivnije razumijevanje onoga što je pretprocesor. U biti, sadrži složenije naredbe i mogućnosti.

Dakle, ovaj program nudi različite dizajne za jednostavnost i brzinu razvoja i stilsku podršku.

Obično je kod usmjeren na ljudske karakteristike:

Čitljivost.

Struktura.

Izvođenje.

Također, kada se razmatraju predprocesori, programeri se suočavaju s konceptom sintaktičkog šećera. Ovo su neki dodaci programskom jeziku koji ne utječu na dobitak. dodatne mogućnosti, ali poboljšati čitljivost.

Glavne vrste

Najčešće opcije su LESS, SASS i Stylus. Dakle, kao što je već gore definirano, prednosti korištenja takvih alata su poboljšanje sadržaja teksta, strukture i produktivnosti. Međutim, malo programera koristi takve programe u svom radu, jer vjeruju da je rad s njima kompliciran i da mnoge funkcije nisu jasne.

Program je najpopularniji u ovom problemu. Ovaj program je 2009. godine razvio tim programera. Ima sve funkcionalnosti uključene osnovna razina. Glavni nedostatak je nedostatak uvjetne konstrukcije i ciklusi. Glavna prednost ovog instrumenta– jasan je i jednostavan za korištenje, to funkcionalnost može se proširiti raznim dodacima.

Sintaktički izvrsni stilski listovi

SASS je najmoćniji pretprocesor. Razvio ga je cijeli tim programera. Osnovan je 2007. kao modul za HAML i također je napisan u Rubyju (postoji C++ port). Također ima širi raspon mogućnosti u usporedbi s drugim programima. Kako biste proširili mogućnosti Syntactically Awesome Style Sheets, možete koristiti moćnu biblioteku Compass. Program SASS ima dvije mogućnosti sintakse: Sass i SCSS.

Ovo je najmlađi i najperspektivniji instrument. Osnovana je 2010. godine. Stylus pretprocesor je najprikladniji i najproširivi pretprocesor.

Obično programer već radi s LESS. Bilo koja datoteka smatra se valjanom MANJE datotekom. U ovom slučaju nema potrebe za ekstenzijom datoteke. Kad uzimamo obični CSS kod, stavimo ga u datoteku s istim imenom, ali s nastavkom .less. Zapravo, primljena je identična datoteka bez grešaka i s točnim sadržajem. Jedina razlika između datoteka bila je dostupnost prazne linije nakon selektora. Dakle, kada koristite ovaj alat, vrijeme kompilacije je puno manje. Stoga akcija ovaj alat usmjeren na određene ciljeve, gradeći prikladnu strukturu. To se može učiniti s običnim CSS-om, ali bit će manje prikladno.

Glavni čimbenici pri izboru

Prema funkcionalne karakteristike Sass je definitivno bolji od drugih programa na mnogo načina. Ali ako je posao već obavljen pomoću Lessa, nema smisla mijenjati ga. Kao što je gore spomenuto, SASS vam omogućuje korištenje Compassa, što olakšava rad s prefiksima. Drugi programi nemaju projekt Compass jer je jezik alata prilično složen. SASS ima Boolean i ciklički operatori. Web stranica LESS je lijepa i laka za korištenje u usporedbi s drugim web stranicama.

Kada radi s @media pravilima, programer dodaje blokove s njima na dnu stranice stilova. To dovodi do nepovezanosti u stilovima. I Less i Sass su alati koji rješavaju ovaj problem, a matematika iza njih općenito je slična. Što se tiče brzine, oba predprocesora imaju dobre performanse.

Programeri obje opcije nastavljaju ih dalje poboljšavati.

Prema recenzijama i komentarima programera, oba se alata mogu koristiti s jednakim mogućnostima. Syntactically Awesome Style Sheets prema nekim izvorima ima više mala brzina u usporedbi s drugima. Neki smatraju da je Stylus danas nadmašio oba pretprocesora.

Dakle, ne postoji točno rješenje za pitanje korištenja Less i Sass, budući da oba imaju dobra svojstva i funkcionalnost. Stoga je izbor određen ciljevima i ciljevima programera.

“i postavilo se sasvim logično pitanje: “Koja je razlika između SASS-a i SCSS-a?” Tema je zanimljiva, pa idemo shvatiti.

Kada govorimo o Kada govorimo o Sassu, općenito mislimo na predprocesor i jezik općenito.

Međutim, koristeći Sass (pretprocesor) možemo koristiti dvije različite sintakse:

• Sass(uvlačenje) ;
• SCSS (sintaksa slična CSS-u).

Malo povijesti

Sass je izvorno bio dio drugog pretprocesora, Haml, koji su izumili i napisali programeri Rubyja.

Tako su Sass stilovi koristili sintaksu sličnu Rubyju, bez zagrada, bez točke-zareza i bez striktne uvlake, poput ove:

// Varijabla!primary -color= hotpink // Primarni =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary -color width= 100% overflow= hidden .my-other-element +border-radius(5 px)

U usporedbi sa CSS sintaksa primjetna je razlika.

Varijabla je određena putem ! , a ne $ , simbol dodjele vrijednosti = , a ne :.

Ali ovako je Sass izgledao prije verzije 3.0, objavljene u svibnju 2010., koja je uvela potpuno nova sintaksa pod nazivom SCSS ili Sassy CSS.

Njegov je cilj bio približiti Sass sintaksu CSS-u, čineći je kompatibilnijom s CSS-om:

// Varijabla $primary -color: hotpink; // Mixin @mixin border-radius($radius ) ( -webkit-border-radius: $radius ; -moz-border-radius: $radius ; border-radius: $radius ; ) .my-element ( color: $primary -boja; širina: 100%; preljev: skriven; ) .my-other-element ( @include border-radius(5 px); )

SCSS je definitivno bliži CSS-u nego Sass. Programeri Sass-a naporno su radili kako bi obje sintakse učinili bližima jedna drugoj zamjenom ! (znak varijable) i = (znak dodjele) na $ i: iz CSS-a.

Dakle, kad započinjete novi projekt, možda se pitate koju sintaksu koristiti. Dopustite mi da vam pomognem da donesete odluku.

Prednosti Sass uvučene sintakse

Iako vam se ova sintaksa može činiti malo čudnom, ima ih nekoliko zanimljivi trenuci. Prije svega, kraći je i lakši za tipkanje. Nema zagrada ni točke-zareza, oni nisu potrebni.

Ne treba @mixin ili @include kada je dovoljno jednostavan simbol: = i + .

Sass također ima čiste standarde kodiranja zbog svoje upotrebe uvlačenja. Budući da netočna uvlaka može pokvariti cijelu .sass tablicu stilova, ovdje je prvi korak osigurati da je kod čist i ispravno formatiran.

Postoji samo jedan način za pisanje Sass koda: napišite ga ispravno.

Ne zaboravite da uvlačenje ima booleovu vrijednost u Sass-u. Kada se primijeni uvlačenje bloka selektora, to znači da je ugniježđeni selektor.

Na primjer:

.element-a boja: vruća ružičasta .element-b float: lijevo ... daje sljedeći CSS kod: .element-a ( boja : vruća ružičasta ; ) .element-a .element-b ( float : lijevo ; )

Jednostavna činjenica pomicanja .element-b jednu razinu udesno znači da jest element djeteta iz .element-a , koji mijenja rezultirajući CSS kod. Dakle, oprezno s udubljenjima!

Vjerujem da će se sintaksa temeljena na uvlačenju više svidjeti timu koji primarno radi s Ruby/Pythonom nego timu PHP/Java programera (ali to nije sigurno).

Prednosti SCSS sintakse

Prvo, potpuno je kompatibilan sa CSS-om. To znači da možete preimenovati CSS datoteku u .scss i ona će raditi kao da se ništa nije dogodilo.

Učiniti SCSS potpuno kompatibilnim s CSS-om uvijek je bio prioritet za Sass podršku od izdavanja SCSS-a, a po mom mišljenju to je jaka točka.

Oni također pokušavaju paziti na ono što bi moglo postati važeća CSS sintaksa u budućnosti i implementirati je (dakle @directives).

Budući da je SCSS kompatibilan s CSS-om, ne zahtijeva praktički nikakvu dodatnu obuku. Sintaksa je uglavnom ista: na kraju krajeva, to je samo CSS s nekim dodacima.

Ovo je važno za nove programere kako bi mogli brzo početi kodirati bez da znaju puno o Sass-u.

Također je čitljiviji budući da specifične konstrukcije već imaju smisla. Kada vidite @mixin, znate da je to mixin deklaracija; kada vidite @include, znate da je to mixin poziv.

Nema nikakvih obveza i sve ima smisla bez tumačenja.

Također, gotovo svi postojeći alati, dodaci i demonstracije za Sass razvijeni su pomoću SCSS sintakse. Ova sintaksa postaje sve više orijentirana na profesionalce i oni je odabiru prema zadanim postavkama (ako nije jedina moguća).

Uglavnom zbog gore navedenih razloga. Na primjer, postaje sve teže pronaći isticanje za čistu Sass sintaksu s uvlačenjem; općenito su dostupne samo SCSS opcije pozadinskog osvjetljenja.

Zaključak

Izbor je u svakom slučaju vaš, ali osim ako nemate stvarno uvjerljiv razlog za korištenje uvučene sintakse, toplo bih preporučio korištenje SCSS-a umjesto Sass-a. Ne samo da je lakše, već je i praktičnije. Ako ste potpuni početnik, onda je SCSS ono što trebate. Sličnost s CSS-om neće vas uplašiti od učenja izgleda pomoću predprocesora. Ali onda možete razmisliti o korištenju Sass-a u svojim projektima. Glavna stvar je ne bojati se koristiti nove tehnologije u svom radu!

p.s. Imajte na umu da se Sass nikada ne skraćuje od velika slova, bez obzira radi li se o sintaksi ili programskom jeziku. Dok je SCSS uvijek označen velikim slovima.

Više mi se sviđa SASS sintaksa nego SCSS zbog svoje kratkoće. Ali masovno ugniježđivanje stilova u SASS-u može brzo eliminirati prednosti njegove kratkoće. U svakom slučaju, razlika između SASS i SCSS nije temeljna. Pokazalo se da je LESS bliži SCSS-u nego SASS-u. I, općenito, to je ista stvar. Nema puno razlika, ali par njih iz temelja mijenja odnos snaga.

1. MANJE - može na strani klijenta koristeći JS.

Točnije, nije da može, on je za to stvoren. Uobičajena praksa za korištenje LESS koda:

Tada mu je dodana mogućnost kompajliranja na poslužitelju (i js i ruby).

Na prvi pogled čini se kao čudna nekretnina. Zašto kompajlirati na strani klijenta ako možete savršeno kompajlirati na serveru i poslužiti gotov komprimirani CSS kao što smo navikli sa SASS-om?

Razlog postaje jasan nakon proučavanja neopisivih posljednjih redaka LESS dokumentacije:

@visina: `document.body.clientHeight`;

Tako mala usamljena linija pruža mogućnosti o kojima su dizajneri izgleda samo sanjali od početka svladavanja stilova. Pozivanje Java skripte na strani klijenta iz CSS-a i uzimanje u obzir stvarnih postavki preglednika pri stvaranju stilova.

Odnosno, sada imamo priliku prvo učitati DOM, a zatim ga kreirati za njega prilagođeni CSS točno na strani klijenta. Zatim sami razmislite kakve vam to mogućnosti otvaraju.

Drugo je pitanje treba li to vašem projektu. Jasno je da su svi navikli na neizvjesnost/neovisnost klijenta i raspored u stilu “radimo to univerzalno da se više-manje vidi svima na svim rezolucijama”. Ali to nije razlog da zaboravite da sada postoji takva prilika i s njom možete napraviti, na primjer, vrlo fleksibilan raspored.

2. LESS, za razliku od SASS/SCSS, nema logike.

Ne postoji ako/onda, za, itd. u MANJE. Iako, s obzirom da se JS lako ugrađuje u njega, mislim da je sasvim moguće zeznuti logiku. Nisam probala.

3. Miješanje je lakše u MANJE + možete miješati razrede.

Jako mi se svidjela činjenica da u LESS možete uključiti svojstva drugih klasa u definiciju. Sama klasa je mixin. Ovo je još jedna značajka koju SASS/SCSS nema. Možete uključiti običnu CSS datoteku u LESS i koristiti njene klase za definiranje svojih svojstava. Na primjer:

omot (
tekst-prelom: omot;
razmak: pre-omotavanje;
razmak: -moz-pre-wrap;
prelom riječi: break-word;
}
prije ( .wrap )

Sažetak

S izuzetkom 1. točke, razlika nije velika i izbor je veći za amatera.

Meni osobno LESS izgleda privlačnije zbog svoje jednostavnosti. Nikad prije nisam trebao cikluse i uvjete u stilovima. Klasični uslužni programi poput "box-shadow, linear-gradient, darken" dostupni su u LESS-u.

Da, mnoge gotove biblioteke već su napisane za SASS (