Pretprocesori. Video prezentacija tečaja “Sass and Less Preprocessors. Automatizacija i pojednostavljenje Front-end razvoja"

CSS pretprocesor je CSS dodatak koji pruža nove značajke i funkcionalnost CSS-u pomoću dodane sintakse.

Svrha pretprocesora: osigurati prikladne sintaktičke konstrukcije za web programere kako bi pojednostavili i ubrzali razvoj i održavanje stilova u projektima.

CSS predprocesori čine kod napisan korištenjem pretprocesorskog jezika čistim i valjanim.

Uz pomoć pretprocesora, vaš pisani kod postaje: čovjeku čitljiv, strukturiran i logičan, produktivan.

Među najpopularnijim pretprocesorima su Less, Sass (Scss), Stylus. Također manje uočljivi alati u ovom području su Closure Stylesheets, CSS Crush, oni su manje popularni na ovaj trenutak, no još uvijek ih neki programeri koriste. Pokušajmo razumjeti mogućnosti i značajke Less, Sass (Scss), Stylus.

Standardna upotreba CSS-a prilično je složena. Sintaksa bez ugniježđenja izravno je teška za vizualnu percepciju. Nedostatak normalnih varijabli i funkcija čini CSS kod usko fokusiranim i s mnogo nepotrebnih i nepotrebnih detalja.

Dostupna dokumentacija - sada svatko može svladati odabrani predprocesor u kratkom vremenu, bez dodatnih troškova. Druga prednost je jednostavnost korištenja pretprocesora. Da biste to učinili, samo trebate instalirati poseban program, koji će nadzirati datoteke namijenjene predprocesoru, a kada se one promijene, kompajlirati sadržaj tih datoteka u čisti CSS kod.

Za naprednije korisnike postoje posebni alati za izgradnju projekata.

Less je najpopularniji i najčešće korišten pretprocesor. Razvijen na temelju JavaScripta, uključuje osnovne mogućnosti pretprocesora, ali ne pruža uvjetne konstrukcije i petlje u uobičajenom smislu. Zbog svoje jednostavnosti i konciznosti, ima standardnu ​​CSS sintaksu i mogućnost proširenja funkcionalnosti upotrebom dodataka.

LESS pruža dinamičke mogućnosti za CSS: varijable, miksine, operacije i funkcije. Dokumentacija je vrlo prilagođena programerima, a sintaksa je vrlo slična čistom CSS-u. Popularni okviri, kao što je Twitter Bootstrap, u velikoj mjeri koriste MANJE dinamičke značajke. Međutim, LESS omogućuje ponovno korištenje klasa kao mixina bilo gdje u tablici stilova.

Još jedan moćan i popularan predprocesor je Sass. Ogromna zajednica programera formirala se oko ovog alata. Osnovan je 2007. kao modul za HAML i napisan je u Rubyju (omogućuje C++ priključak). Ima širok raspon značajki u usporedbi s Lessom. Pretprocesor proširuje svoju funkcionalnost bibliotekom Compass, što omogućuje ići dalje CSS okvir i raditi u većem obimu. Pruža dvije vrste sintakse: Sass (Syntactically Awesome Style Sheets) je jednostavnija CSS sintaksa koja se temelji na identitetu. On se smatra više zastarjela verzija. Scss (Sassy CSS) koji se temelji na standardnoj CSS sintaksi.

– prilično mlad, ali već obećavajući CSS predprocesor. Razvijen još 2010. Mnogi ga smatraju prikladnim i proširivim pretprocesorom te fleksibilnijim od Sassa. Razvijeno u JavaScriptu. Postoji podrška za mnoge opcije sintakse od onih nalik na CSS do jednostavnijih i lakših.

Korisni alati za programere:

• CodeKit: kompajlira Sass, LESS i Stylus datoteke, a zatim automatski ponovno pokreće vaš web preglednik kada se datoteke ažuriraju. To uključuje optimizaciju slika projekta kako bi se poboljšala izvedba sustava. Tehnologija se plaća, ali postoji i probna verzija za rad.
• LiveReload: provjerava promjene datoteka, zatim ih obrađuje i automatski ponovno učitava web preglednik. Verzija radi za Mac i Windows.
• Scout: radi sa Sassom i Compassom u Ruby okruženju. Radi za Mac i Windows.
• SimpLESS: Osnovni i jednostavni LESS CSS kompajler za Mac i Windows.

Kako biste odabrali pravi predprocesor za svoj rad, pokušajte koristiti nekoliko. A na temelju rezultata testiranja bit će vam puno lakše napraviti svoj izbor. Također ne zaboravite da kada svladavate predprocesor, ne učite novi jezik, već samo novu sintaksu i mogućnosti. Company™ vam želi ugodan rad u svijetu CSS-a!

2545 puta 1 Pregledano puta danas

I kad će se ovi developeri konačno smiriti i prestati maltretirati novajlije!? Prije nego što sam stigao u potpunosti razumjeti CSS, rekli su mi: "Svi pravi dizajneri izgleda odavno su prešli na pretprocesore. Pa, kakav je ovo čisti CSS uoči 2020.!?" Što uraditi?

Prvo, programeri nikada neće prestati smišljati nove tehnologije. A profesionalni dizajneri izgleda vrlo su im zahvalni na tome. Jezik tablice CSS stilovi, izumljeni su u vrijeme kada su web stranice bile primitivne. No kako su godine prolazile, stranice su postajale sve složenije i masivnije, ali su metode izgleda ostale iste. Dizajneri izgleda umorni su od pisanja sličnih dijelova koda. Bilo je nemoguće brzo promijeniti boju na mjestu. Pojavila se potreba za većom automatizacijom izgleda pa su se pojavili pretprocesori CSS koda. A danas ćemo govoriti o jednom od njih, LESS pretprocesoru.

Sastavljanje LESS i VS koda

Sve što trebate za kompajliranje LESS koda je VS Code editor i proširenje Easy Less. Kako radi?

Stvorite stilsku datoteku s nastavkom .less

Nakon spremanja, .css datoteka će se automatski generirati u istoj mapi.

Svaki put kada se promjene spremaju, LESS datoteke se kompiliraju u CSS datoteke. Preglednici još nisu naučili razumjeti LESS, trebaju CSS kod.

MANJE Varijable

Svojstva koja se najčešće koriste stavljamo u varijable. Stranica obično koristi ponavljajuće boje i porodice fontova. Sve boje stavljamo u varijable, a zatim u pravilo ne mijenjamo kod boje, već varijablu. Pitate: "U čemu je fora? Ipak moram nešto prepisati, koja je razlika?"

Glavna značajka je brza promjena boje. Boja se mijenja samo jednom, u varijabli. Zamjena boje u jednoj varijabli zamijenit će boju na svim stranicama stranice. Sama ova značajka je dovoljna da počnete koristiti LESS. Varijable deklariramo u LESS i u njih spremamo vrijednosti koje su nam potrebne; dajemo smislena imena varijablama.

@primarni: #194eb4;
@sekundarni: #f2b834;
@uspjeh: #4cb514;
@crna: #000;
@bijelo: #fff;

Sada pišemo normalan kod, kao što smo radili u CSS-u, ali umjesto vrijednosti zamjenjujemo varijable.

MANJE div(
ispuna: 0;

Crna boja;
}

Nakon spremanja, CSS kod se kompilira. Uopće ne diramo CSS datoteku, sav posao se obavlja u LESS datoteci. Sva svojstva koja se često ponavljaju možete staviti u varijable.

CSS div(
ispuna: 0;
obitelj-fontova: Roboto, sans-serif;
boja: #000;
) Mixins u LESS

Miksini su korisni za ponovno koristiti skup svojstava - okviri, gumbi, naslovi. Grupirani skup svojstava koja se mogu primijeniti na različite birače.

Stranica ima nekoliko gumba iste vrste u različitim bojama, ali s istim svojstvima fonta. Mi stvaramo mixin koji pomaže automatizirati proces stvaranja gumba.

Button_font(

transformacija teksta: velika slova;
veličina fonta: 18px;
}

Dodajte mixin svojstvima gumba za odabir.

Portfelj__gumb (
ispuna: 15px 80px;
boja: #344258;
.button_font;
}

Na izlazu dobivamo:

Portfelj__gumb (
ispuna: 15px 80px;
boja: #344258;
obitelj-fontova: "DIN Pro Bold";
transformacija teksta: velika slova;
veličina fonta: 18px;
}

Simbol ampersand

Umjesto dupliciranja naziva selektora, koristimo simbol ampersand.

Portfelj__stavka (
položaj: relativan;
boja pozadine: #3c3c3c;
}
&: lebdi (
boja pozadine: #ccc;
}
}

CSS.portfolio__item (
položaj: relativan;
boja pozadine: #3c3c3c;
}
.portfolio__item:lebdi (
boja pozadine: #ccc;
) Medijski upiti u MANJE

Možete pisati medijske upite izravno unutar selektora.

MANJE.zaglavlje__naslov(
boja: #344258;
veličina fonta: 40px;

ispuna: 0 20px;
@medijski samo zaslon i (maksimalna širina: 320 px)(
veličina fonta: 22px;
}
} CSS.zaglavlje__naslov(
boja: #344258;
veličina fonta: 40px;
obitelj-fontova: "DIN Pro", sans-serif;
ispuna: 0 20px;
}
@medijski samo zaslon i (maksimalna širina: 320 px) (
.zaglavlje__naslov(
veličina fonta: 22px;
}
) Zaključak

Ovaj članak ne pokriva niti 25% svih značajki koje LESS nudi. Da, to nije potrebno, svrha članka je motivirati početnike da počnu koristiti pretprocesore. Počevši od najjednostavnijih, postupno prelazeći na složenije.

Proces pisanja HTML-a i CSS-a može biti pomalo naporan i zahtijeva puno istih zadataka iznova i iznova. Zadaci poput zatvaranja oznaka u HTML-u ili monotonog pregledavanja heksadecimalnih vrijednosti boja u CSS-u.

Takvi različiti zadaci, u pravilu, su mali i malo smanjuju učinkovitost. Srećom, ove i nekoliko drugih neučinkovitosti pretprocesori su prepoznali i doveli u pitanje.

Predprocesor je program koji uzima jedan tip podataka i pretvara ga u drugi tip podataka. U slučaju HTML-a i CSS-a, neki od najpopularnijih pretprocesorskih jezika su Haml i Sass. Haml se pretvara u HTML, a Sass u CSS.

Od svog početka, u rješavanju nekih od najčešćih problema, Haml i Sass su pronašli mnoge dodatne načine za proširenje HTML mogućnosti i CSS. Ne samo uklanjanjem neučinkovitih zadataka, već i stvaranjem metoda koje razvoj web stranica čine lakšim i logičnijim. Pretprocesori su također postali popularni zbog različitih okvira koji ih podržavaju; jedan od najpopularnijih je Compass.

Haml

CodeKit također podržava druge predprocesore koji bi vam također mogli biti korisni.

Doctype

Prvi dio pisanja dokumenta u Hamlu je znati koju vrstu doctype koristiti. Kada radite s HTML dokumentima, glavna vrsta dokumenta bit će HTML5. U Hamlu su vrste dokumenata definirane s tri uskličnika (!!!), iza kojih slijedi nešto specifično ako je potrebno.

Zadani tip dokumenta u Hamlu je HTML 1.0 Transitional. Stoga, da biste ga učinili poput HTML5, morate proći brojku pet nakon uskličnika (!!! 5).

Spremni HTML

Deklaracija elemenata

Jedna od značajki koje definiraju Haml je njegova sintaksa i način deklariranja i ugniježđivanja elemenata. HTML elementi, obično sadrže početnu i završnu oznaku, ali Haml elementi imaju samo jednu početnu oznaku. Elementi počinju znakom postotka (%), a zatim uvlačenje određuje ugniježđivanje. Uvlačenje u Hamlu može se napraviti s jednim ili više razmaka, ali je važno da uvlačenje ostane isto. Kartice i razmaci ne mogu se kombinirati i isti broj kartica ili razmaka mora biti isti u cijelom dokumentu.

Uklanjanje potrebe za otvaranjem i zatvaranjem oznaka i potrebna struktura uvlačenja stvara izgled koji je lako pratiti. Oznake se u bilo kojem trenutku mogu brzo pogledati i promijeniti bez poteškoća.

%body %header %h1 Pozdrav svijete! %odjeljak %p Lorem ipsum dolor sit amet.

Sastavljen HTML

Pozdrav svijete!

Lorem ipsum dolor sit amet.

Obrada riječi

Tekst u Haml-u može se postaviti u isti redak kao i deklarirani element ili uvučen ispod elementa. Tekst ne može biti istovremeno u istom retku kao deklarirani element i ugniježđen ispod njega; mora postojati jedna ili druga opcija. Gornji primjer može se prepisati na sljedeći način:

%body %header %h1 Pozdrav svijete! %odjeljak %p Lorem ipsum dolor sit amet.

Atributi

Atributi, kao i elementi, deklarirani su malo drugačije u Hamlu. Atributi se deklariraju odmah nakon elementa, u vitičastim ili zagradama, ovisno o tome želite li koristiti Ruby ili HTML sintaksu. Atributi stila Ruby koristit će standardnu ​​hash sintaksu inside(), dok će atributi in HTML stil koristit će standard HTML sintaksa iznutra ().

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

Sastavljen HTML

Klase i ID-ovi

Po želji, klase i identifikatori mogu se deklarirati kao i drugi atributi, ali se s njima može postupati i malo drugačije. Umjesto popisa atributa klase i id-a s njihovim vrijednostima unutar zagrada, vrijednost se može navesti izravno nakon elementa. Koristeći ili točku za klase ili hash za identifikator, vrijednost se može dodati odmah nakon elementa.

Osim toga, atributi se mogu miješati spajanjem u odgovarajući format. Klase moraju biti odvojene točkama, a ostali atributi mogu se dodati pomoću jednog od prethodno navedenih formata.

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

Sastavljen HTML

Klase i identifikatori u

U slučaju da se klasa ili identifikator koristi u , %div se može izostaviti i vrijednost klase ili identifikatora može se uključiti izravno. Opet, klase bi trebale biti definirane točkom, a identifikatori hashom.

Sjajno.sjajno.lekcija #početak.lekcija

Sastavljen HTML

Booleovi atributi

Booleovi atributi tretiraju se isto kao da su u Rubyju ili HTML-u, ovisno o korištenoj sintaksi.

%input(:type => "checkbox", :checked => true) %input(type="checkbox" checked=true) %input(type="checkbox" checked)

Sastavljen HTML

Izbjegavanje teksta

Jedna od prednosti Hamla je mogućnost izračunavanja i pokretanja Rubyja, ali to nije uvijek željena radnja. Tekst i linije koda mogu se izbjeći korištenjem obrnute kose crte (\), koja omogućuje eksplicitni prikaz teksta bez izvršenja.

U donjem primjeru, prvi uzorak = @author izvršava Ruby, dobivajući ime autora iz aplikacije. Drugi uzorak počinje obrnutom kosom crtom koja izlazi iz teksta i ispisuje se takav kakav jest bez izvršenja.

Autor = @autor \= @autor

Sastavljen HTML

Shay Hou = @autor

Alternative za izbjegavanje teksta

S vremena na vrijeme, izbjegavanje teksta nije dovoljno i Ruby je potreban za generiranje željenog izlaza. Jedan popularan primjer za to je pokušaj uključivanja točke odmah nakon veze, ali ne kao dio teksta veze. Stavite točku na nova linija nije prihvatljivo jer će se smatrati prazna vrijednost klase, uzrokujući grešku kompilacije. Dodavanje obrnute kose crte prije točke izbjegava znak, ali stavlja razmak između posljednje riječi i točke. Opet, ne daje željeni rezultat.

U tim slučajevima dobro dođe Ruby helper. Primjer u nastavku koristi pomoćnik za postavljanje točke odmah iza posljednje riječi, ali izvan teksta veze.

%p Shay - = uspjeti "." do %a(:href => "#") dobro obavljeno

Sastavljen HTML

Shay - Dobro napravljeno.

Komentari

Poput elemenata i atributa, komentarima se u Hamlu postupa malo drugačije. Kôd se može jednostavno komentirati pomoću jedne kose crte (/). Pojedinačni reci mogu se komentirati korištenjem kose crte na početku retka, a blokovi koda mogu se komentirati tako da budu ugniježđeni ispod kose crte.

%div / Redak komentara Trenutni redak / %div Komentirani blok

Sastavljen HTML

Trenutni redak

Uvjetni komentari

Uvjetni komentari također se drugačije obrađuju u Hamlu. Za stvaranje uvjetnog komentara koristite uglate zagrade() oko uvjeta. Ove uglate zagrade moraju se staviti odmah iza kose crte.

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

Sastavljen HTML

Tihi komentari

Haml također pruža mogućnost stvaranja posebnih tihih komentara. Tihi komentari razlikuju se od osnovnih HTML komentara po tome što se, nakon kompajliranja, sav sadržaj unutar tihog komentara u potpunosti uklanja sa te stranice i ne pojavljuje se u rezultatima. Tihi komentari započinju crticom, nakon koje slijedi hash (-#). Kao i kod drugih komentara, tihi komentari mogu se koristiti za uklanjanje jednog ili više redaka pomoću ugniježđivanja.

%div -# Izbrisana linija Trenutačna linija

Sastavljen HTML

Trenutni redak

Filteri

Haml nudi nekoliko filtara koji vam omogućuju korištenje različitih vrsta unosa unutar Hamla. Filtri počinju dvotočkom, nakon čega slijedi naziv filtra, na primjer :markdown, sa svim sadržajem za filtriranje privitka ispod njega.

Uobičajeni filtri

Ispod su neki uobičajeni filtri, uključujući najpopularnije: css i: javascript.

• :cdata
• :kava
• :pobjegao
• :javascript
• :manje
• :smanjenje
• :maruku
• :običan
• :sačuvati
• :rubin
• :sass
• :scss
• :tekstil

Javascript filter

:javascript $("button").on("click", function(event) ( $("p").hide("slow"); ));

Sastavljen HTML

$("gumb").on("klik", funkcija(događaj) ( $("p").hide("sporo"); ));

CSS i Sass filteri

:css .container ( margina: 0 automatski; širina: 960px; ) :sass .container margina: 0 automatska širina: 960px

Sastavljen HTML

.container ( margina: 0 auto; širina: 960px; )

Ruby interpolacija

Kao što je ranije spomenuto, Haml može procijeniti Ruby, a ponekad mogu postojati slučajevi u kojima se Ruby mora procijeniti unutar običnog teksta. U ovom slučaju, Ruby se mora interpolirati umotavanjem potrebnog koda u Ruby.

Ispod je primjer Rubyja koji je interpoliran kao dio naziva klase.

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

Sastavljen HTML

SCSS i Sass

SCSS i Sass su jezici za predprocesiranje koji se prevode u CSS. Pomalo su poput Hamla i olakšavaju pisanje koda, a nude vrlo malo kontrola. Pojedinačno, SCSS i Sass imaju isto porijeklo, ali tehnički imaju različitu sintaksu.

Radi sažetosti, Haml i Sass bili su jedini predprocesori koji su obrađeni u ovom vodiču. Također su odabrani jer su izgrađeni pomoću Rubyja i izravno se uklapaju u aplikacije Ruby on Rails. Također su dobili ogromnu podršku zajednice.

Kada se radi o odabiru pretprocesora, važno je razmotriti što je najbolje za vaš tim i projekt. Projekti izgrađeni u Node.js vjerojatno mogu imati više koristi od Jadea i Stylusa. Najvažniji aspekt koji treba uzeti u obzir je ono na što je vaš tim navikao koristiti. Istražite svaki projekt i odaberite najinformiranije rješenje.

Resursi i veze

• Haml - HTML jezik za označavanje apstrakcije
• Sass - Sintaktički izvrsne tablice stilova
• Sass Playground na SassMeisteru

Imate li kakvih pitanja?

Implementacija dizajnerskog izgleda je nemoguća bez upotrebe HTML-a i CSS-a. Ako nam označni jezik omogućuje skiciranje predloška potrebnih elemenata, tada CSS pretvara ovaj predložak u pravi tip, kao u izvoru. Čini se da uz pomoć čistog CSS-a možete napraviti stranicu onakvom kakvom je kupac želio.

Međutim, ako netko otvori vašu jednu CSS datoteku i pokuša nešto podesiti, jeste li sigurni da će kôd biti čitljiv, uređivati, strukturiran i razumljiv? Ako je vaš projekt ogroman, s mnogo dijelova, jeste li sigurni da ga možete lako podržati u budućnosti? Ako koristite CSS predprocesor, onda je odgovor da, a osim toga, ovo je način da automatizirate izgled web stranice. Zašto? Sada ćemo saznati.

Što je CSS predprocesor?

Koliko ja razumijem, ovo je dodatak standardnom CSS-u koji proširuje standardne mogućnosti, dodaje neke funkcije i omogućuje pisanje čitljivijeg i lakšeg za razumijevanje koda. Na izlazu izvor kompajlira u CSS na koji smo navikli. Korištenje takvog alata u modernom razvoju je “must have” i savjetujem svakom dizajneru izgleda ili programeru da se upozna s njim. Treba dodati da ima puno toga za izabrati, jer ima dosta CSS pretprocesora, ali treba istaknuti one najpopularnije:

• Olovka

Svi gore navedeni predprocesori imaju gotovo identičnu funkcionalnost, samo su male razlike u sintaksi. Vratimo se sada na ranije postavljeno pitanje: koje nam prednosti daju predprocesori kako bi naš kod bio praktičniji i lakši za održavanje? Ovo je, prije svega, gniježđenje. Ova nam značajka daje priliku za strukturiranje elemenata, jednostavno pronalaženje roditelja elementa, brzo pisanje pseudo-klasa i pseudo-elemenata, pa čak i korištenje BEM-a! npr.:
.staza
boja: #fff
&__titula
ispuna: 10px
&:lebdjenje, &:fokus
boja: plava

Pogledajte ovaj isječak koda napisan u Sass-u. Sve se to prevodi u sljedeći CSS:

Staza (boja: #FFF;)
.track__title ( padding: 10px;)
.track__title:hover, .track-title:focus (boja: plava)

Lakonski, praktičan, razumljiv, struktura od roditelja do djeteta je sjajna, zar ne? Druga, ne manje važna prednost su varijable. Načelo njihovog rada je krajnje jednostavno: naziv varijable počinje simbolom $, a zatim sam naziv. Vrijednost pišemo kroz dvotočku - to može biti boja u bilo kojem prikladnom obliku, vrijednosti uvlake, širina, veličina fonta i tako dalje. Kao rezultat, dobit ćemo nešto poput ovoga:

$btn-boja: plava;
$font-main-size: 16px;

A upotreba će izgledati ovako:

Blok (
veličina-font-a: $font-main-size;
}

Zamislite samo kako je to zgodno. Ako trebate promijeniti boju gumba na cijeloj stranici, onda to trebate učiniti samo na jednom mjestu! Pa idemo dalje. Treća i najveća stvar koju nam CSS predprocesori mogu ponuditi je korištenje mixina. U našem uobičajenom razumijevanju, miksini su funkcije koje se mogu koristiti nekoliko puta bez ponavljanja istih dijelova koda (sjetite se jednog od programskih principa - DRY - Don't repeat yourself). Da budem iskren, ne koristim mixins vrlo često, očito nije bilo tako hitne potrebe, ali ipak ću pokazati nekoliko primjera. Jedna od funkcija koju najviše koristim je sljedeća:

@function em($pixels, $context: $browser-context) (
@if (bez jedinica ($piksela)) (
$piksela: $piksela * 1px;
}
@if (bezjedinica($kontekst)) (
$kontekst: $kontekst * 1px;
}
@return $pixels / $context * 1em;
}

A njegova primjena je sljedeća:

tijelo(
veličina fonta: em(14px);
}

Da, kao što razumijete, ovo je samo pretvorba veličine fonta iz PX u Em (živjeli dani kada ste za takve sitnice koristili posebne usluge ili ih sami izračunavali na kalkulatoru). Sljedeći primjer također štedi mnogo vremena:

@mixin input-placeholder (
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Njegova upotreba:

unos, tekstualno područje (
@include input-placeholder (
boja: $siva;
}
}

Postoji mnogo više primjera koji se mogu dati, međutim, vrijedi početi sami koristiti mixins kako biste shvatili koliko je ovaj alat koristan. Možda postoji još jedan razlog zbog kojeg ćete se zaljubiti u CSS predprocesore, a njegovo ime je modularnost. 2018. je, a modularnost je posvuda - od pokretača HTML predložaka do raznih CSS okvira i graditelja projekata.

Moderni CSS je moćan, au kombinaciji s pretprocesorima općenito je borbeni stroj za dizajniranje sadržaja na stranicama. Članak pruža opsežan vodič za Sass/SCSS s primjerima. Nakon što ovo pročitate, naučit ćete kako koristiti miksine, varijable i direktive kako biste imali još veću kontrolu nad svojim stilovima.

Napomena Sav Sass/SCSS kod kompilira se u CSS tako da ga preglednici mogu razumjeti i ispravno prikazati. Trenutačno preglednici ne podržavaju rad sa Sass/SCSS ili bilo kojim drugim CSS predprocesorom izravno, ali standardni CSS specifikacija ne pruža sličnu funkcionalnost.

Zašto koristiti Sass/SCSS umjesto CSS-a?

Gniježđenje- SCSS omogućuje gniježđenje CSS pravila jedno u drugo. Ugniježđena pravila primjenjuju se samo na elemente koji odgovaraju vanjskim selektorima (a ako govorimo o Sass-u, tamo je sve lijepo i intuitivno čak i bez zagrada).

Varijable- standardni CSS također ima koncept varijabli, ali u Sass-u možete raditi s njima malo drugačije. Na primjer, ponovite ih kroz naredbu @for. Ili dinamički generirajte svojstva. Više možete proučiti na web stranici projekta na ruskom jeziku.

Poboljšane matematičke operacije- možete zbrajati, oduzimati, množiti i dijeliti CSS vrijednosti. Za razliku od standardnog CSS-a, Sass/SCSS vam omogućuje da radite bez calc() .

Trigonometrija- SCSS vam omogućuje pisanje vlastitih (sinus i kosinus) funkcija koristeći samo Sass/SCSS sintaksu, slično kao što to možete učiniti u drugim jezicima poput JavaScripta.

direktive@neko vrijeme i izražavanje@if-else - Možete napisati CSS kod koristeći poznate elemente iz drugih jezika. Ali nemojte se zavarati - na kraju će izlaz biti običan CSS.

miksini (miksini)- možete stvoriti skup CSS svojstava jednom i raditi s njima više puta ili ih miješati s drugim vrijednostima. Mixini se mogu koristiti za stvaranje zasebnih tema istog izgleda. Mixini također mogu sadržavati cijela CSS pravila ili bilo što drugo dopušteno u Sass dokumentu. Oni čak mogu prihvatiti argumente, omogućujući vam stvaranje širokog spektra stilova s ​​malim brojem mixina.

Funkcije- Možete stvoriti CSS definicije kao funkcije za ponovnu upotrebu.

Sass pretprocesor

Sass nije dinamičan. Nećete moći generirati i/ili animirati CSS svojstva i vrijednosti u stvarnom vremenu. Ali možete ih stvoriti više učinkovit način i neka ih standardna svojstva (poput CSS animacije) posude od tamo.

Sintaksa

SCSS zapravo ne dodaje nikakve nove značajke CSS-u osim nove sintakse koja često smanjuje vrijeme kodiranja.

Preduvjeti

Postoji 5 CSS predprocesora: Sass, SCSS, Less, Stylus i PostCSS.

Ovaj članak uglavnom pokriva SCSS, koji je sličan Sass-u. Više o ovim predprocesorima možete pročitati na Stack Overflow (izvornik) ili na qaru (prijevod na ruski).

SASS  -  (.sass) Sintaktički sjajni stilski listovi.

SCSS  -  (.scss) Sass y C kaskadni listovi stilova.

Ekstenzije .sass i .scss su slične, ali ipak nisu iste. Za fanove naredbeni redak Evo metode pretvorbe:

# Pretvori iz Sass u SCSS $ sass-convert style.sass style.css # Pretvori iz SCSS u Sass $ sass-convert style.scss style.sass

Sass je prva specifikacija za SCSS s ekstenzijom datoteke .sass. Njegov razvoj započeo je još 2006. godine, no kasnije je razvijena alternativna sintaksa s ekstenzijom .scss.

Imajte na umu da drugi predprocesori imaju sličnu funkcionalnost kao SCSS, ali se sintaksa može razlikovati. Također, sve što radi u CSS-u savršeno će raditi i u Sass-u i SCSS-u.

Varijable

Sass/SCSS vam omogućuje rad s varijablama. U CSS-u su označeni dvostrukom crticom (--), au predprocesorima su predstavljeni znakom dolara ($).

$broj: 1; $boja: #ff0000; $text: "tproger zauvijek."; $text: "TO zauvijek." !zadano; $ništa: nula;

Možete dodijeliti zadanu vrijednost varijablama koje još nemaju vrijednost dodavanjem oznake !default na kraju vrijednosti. U ovom slučaju, ako je varijabli već dodijeljena vrijednost, ona se neće promijeniti; ako je varijabla prazna, bit će joj dodijeljena nova navedena vrijednost.

#kontejner ( sadržaj: $tekst; )

Varijable u Sass-u mogu se dodijeliti bilo kojem svojstvu.

Ugniježđena pravila

Standardni ugniježđeni CSS elementi koji koriste razmak:

/* Ugniježđena pravila */ #A ( boja: crvena; ) #A #B ( boja: zelena; ) #A #B #C p ( boja: plava; )

Isti ugniježđeni elementi koristeći SCSS:

/* Ugniježđena pravila */ #A ( boja: crvena; #B ( boja: zelena; #C p ( boja: plava; ) ) )

Kao što vidite, sintaksa izgleda čistije i manje se ponavlja.

Ovo je posebno korisno pri upravljanju preopterećenim izgledima. Na taj način, poravnanje u kojem su ugniježđena svojstva zapisana u kodu blisko odgovara stvarnoj strukturi izgleda aplikacije.

Iza kulisa, predprocesor ga još uvijek kompajlira u standardni CSS kod (prikazan gore) kako bi se mogao prikazati u pregledniku. Samo mijenjamo način na koji pišemo CSS.

Ampersand #p (boja: crna; a (težina fonta: podebljano; &:lebdjeti (boja: crvena;)))

Pomoću znaka & možete eksplicitno odrediti gdje treba umetnuti nadređeni selektor.

Rezultat kompajliranja Sass-a (iz prethodnog primjera) u CSS je ispod.

#p (boja: crna;) #p a (težina fonta: podebljano;) #p a: lebdjeti (boja: crvena;)

Kao rezultat toga, ampersand je preveden u ime nadređenog elementa a (a:hover).

Miksini (poznati i kao nečistoće)

Miksini također mogu sadržavati selektore, uključujući one sa svojstvima. I selektori mogu sadržavati reference na nadređeni element kroz znak & (&), sjećate se toga, zar ne?

Primjer rada s više preglednika

Neke stvari u CSS-u prilično je zamorno pisati, posebno u CSS3, gdje povrh toga često morate koristiti veliki broj prefiksa dobavljača (-webkit- ili -moz-).

Mixini vam omogućuju stvaranje grupa CSS deklaracija koje ćete koristiti više puta na cijeloj web stranici. Dobra praksa bila bi koristiti mixins za prefikse dobavljača. Primjer:

@mixin border-radius($radius) ( // Prefiksi za: -webkit-border-radius: $radius; // Chrome i Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radijus; // Internet Explorer-o-border-radius: $radijus; // Opera border-radius: $radius; // Standardni CSS ) // Primjer korištenja mixina border-radius nakon stvaranja it.box ( @include border-radius(10px); )

Aritmetičke operacije

Kao u stvaran život, ne možete raditi s brojevima koji imaju nekompatibilne vrste podataka (na primjer, zbrajanje px i em).

Zbrajanje i oduzimanje p ( font-size: 10px + 2em; // GREŠKA! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )

Uvijek obratite pozornost na vrstu podataka koji se dodaju. Odnosno, pikseli na piksele, slonovi na slonove. Oduzimanje radi na isti način, ali s predznakom minus.

Primjer oduzimanja:

Množenje

Napravljeno točno kao u CSS-u, koristeći calc(a * b), ali bez calc-a i zagrada. Osim toga, također možete razmakom odvojiti znak množenja od brojeva (5*6 == 5 * 6).

Iznimka Ne možete međusobno množiti piksele. Odnosno, 10px * 10px != 100px . 10px * 10 == 100px.

P ( širina: 10px * 10px; // GREŠKA! širina: 10px * 10; // 100px širina: 1px * 5 + 5px; // 10px širina: 5 * (5px + 5px); // 50px širina: 5px + ( 10px / 2) * 3; // 20px )

Podjela

S dijeljenjem su stvari malo kompliciranije, ali možete to shvatiti jer je u standardnom CSS-u kosa crta rezervirana za korištenje kratkog oblika svojstava notiranja. Primjer ispod.

/* kratki oblik za svojstva pisanja */ font: italic bold .8em/1.2 Arial, sans-serif; /* standardna forma evidencija imovine */ font-style: italic; font-weight: bold; veličina fonta: .8em; visina linije: 1,2; obitelj fontova: Arial, sans-serif;

Postoje tri pomoćnika koji će nagovijestiti mogućnost podjele:

Vrijednost (ili bilo koji njezin dio) pohranjuje se u varijabli ili je vraća funkcija.

Vrijednosti su u zagradama.

Vrijednost se koristi kao dio drugog aritmetičkog izraza.

$var1: 20; $var2: 4; p ( top: 16px / 24px; // Prikazuje nepromijenjeno u standardnom CSS-u top: (20px / 5px); // Dijeli (ali samo kada se koriste zagrade) top: #($var1) / #($var2); / / Izlazi kao normalan CSS kod, ne provodi se dijeljenje top: $var1 / $var2; // Dijeljenje se izvodi top: random(4) / 5; // Dijeljenje se izvodi (ako se koristi u kombinaciji s funkcijom) top: 2px / 4px + 3px; // Dijeljenje se izvodi ako se doda još jedna aritmetička operacija)

Rezultat kompilacije u CSS-u:

P ( vrh: 16px / 24px; vrh: 4; vrh: 20 / 4; vrh: 5; vrh: 0.6; vrh: 3.5px; )

Ostatak

Ostatak izračunava ostatak operacije dijeljenja. U nastavku ćemo pogledati kako stvoriti "zebru" za HTML popis.

@mixin zebra() ( @za $i od 1 do 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( boja-pozadine: crna; boja: bijela; ) ) ) ) * ( @include zebra(); text-align: center; )

Stvaranje zebra miksina prikazano je u gornjem ugrađenom kodu. Naredbe @for i @if opisane su u odjeljku ispod.

Za izradu uzorka morate napisati nekoliko HTML elemenata.

zebra zebra zebra zebra zebra zebra zebra

Rezultat u pregledniku:

Zebra je uspješno generirana zebra mixinom

Operatori usporedbe

Direktiva @if uzima SassScript izraz i koristi njegove ugniježđene stilove ako izraz vraća bilo što osim false ili null.

Sljedeće pokazuje kako rade direktive @if i @else kada su ugniježđene unutar mixina.

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

Usporedba na djelu. Miksin razmaka će odabrati veličinu ispune ako je veća od margine.

Nakon kompajliranja u CSS:

Spremnik (ispod: 20px;)

Logički operatori

Opis logičkih operatora

Korištenje Sass logičkih operatora za stvaranje gumba koji ima pozadinu koja se mijenja ovisno o njegovoj širini.

@mixin gumb-boja ($height, $width) ( @if (($height< $width) and ($width >= 35px)) (boja-pozadine: plava; ) @else (boja-pozadine: zelena; ) .button ( @include button-color(20px, 30px) )

Žice

CSS definira 2 vrste nizova: sa i bez navodnika. Sass prepoznaje oboje. Kao rezultat toga, završit ćete s istom vrstom nizova u CSS-u koju ste koristili u Sass-u.

U nekim slučajevima možete dodati nizove važećim CSS vrijednostima bez navodnika, ali samo ako je dodani niz završni element.

P (font: 50px Ari + "al"; // Kompajlira u 50px Arial)

Primjer u nastavku pokazuje što ne treba činiti.

P ( font: "50px" + Arial; // POGREŠKA! )

Možete dodati linije različiti tipovi, ako u njima nema razmaka. Primjer u nastavku neće se kompilirati.

P:after ( sadržaj: "Vratite Linusa" + Torvalds!; // POGREŠKA! )

P:after ( sadržaj: "Vratite Linusa" + "Torvalds!"; // obratite pozornost na "Torvalds!")

Primjer dodavanja više nizova:

P:after ( sadržaj: "Sudbina " + "čovječanstva" + "-" + "iteracija."; )

Zbrajanje nizova i brojeva:

P:after (sadržaj: "Rekurzija" + 2013 + "sudbina nebesnika"; )

Imajte na umu: svojstvo sadržaja radi samo s pseudoselektorima:before i:after. Preporuča se ne koristiti sadržaj u CSS dokumentu, već ga koristiti izravno između oznaka u HTML-u.

Operatori kontrole niti

SCSS ima funkcije (fucntion()) i direktive (@directive). Malo gore, već smo pogledali primjer funkcije kada smo proučavali prosljeđivanje argumenata unutar mixina.

Funkcije se obično nalaze u zagradama odmah iza svog naziva. I direktiva počinje simbolom @.

Kao i JavaScript, SCSS vam omogućuje rad sa standardnim skupom operatora za kontrolu protoka.

ako()

if() je funkcija (a ponekad i osnova umjetne inteligencije).

Njegova uporaba izgleda prilično primitivno: operator će vratiti jednu od dvije vrijednosti navedene u uvjetu.

/* Korištenje funkcije if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@ako

@if je direktiva koja se koristi za uvjetno grananje.

/* Korištenje @if direktive */ p ( @if 1 + 1 == 2 ( granica: 1px solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Rezultat kompilacije:

P (obrub: 1px pun;)

Ispod je kombinirani fork s dodatkom @else direktive.

/* Kreirajte $type varijablu */ $type: rijeka; /* Obojite spremnike plavom bojom ako je vrijednost za varijablu $type rijeka */ div ( @if $type == rijeka ( boja: plava; ) ) /* Uvjetne boje za tekst u oznaci

*/ p ( @if $type == drvo ( boja: zelena; ) @else if $type == rijeka ( boja: plava; ) @else if $type == prljavština ( boja: smeđa; ) )

Provjera prisutnosti nadređenog elementa

Ampersand odabire nadređeni element ako postoji. Inače će vratiti null. Stoga se može koristiti zajedno s direktivom @if.

U sljedećim primjerima pogledat ćemo stvaranje uvjetnih CSS stilova ovisno o prisutnosti nadređenog elementa.

/* Provjerite postoji li nadređeni element */ @mixin does-parent-exist ( @if & ( /* Primijeni plavu boju na nadređeni element ako postoji */ &:hover ( boja: plava; ) ) @else ( /* Nadređeni element nedostaje, primijeni plavu boju na veze */ a ( boja: plava; ) ) )

@za direktivu

Direktiva @for ispisuje skup stilova određeni broj puta. Za svaku iteraciju koristi se varijabla brojača za promjenu izlaza.

Direktiva @for se ponavlja 5 puta.

@za $i od 1 do 5 ( .definition-#($i) ( širina: 10px * $i; ) )

Rezultat kompilacije u CSS-u:

Definicija-1 (širina: 10px;) .definicija-2 (širina: 20px;) .definicija-3 (širina: 30px;) .definicija-4 (širina: 40px;) .definicija-5 (širina: 50px;)

@svaka direktiva

Direktiva @each postavlja $var na svaku vrijednost popisa ili rječnika i ispisuje stilove koje sadrži koristeći odgovarajuću vrijednost $var.

@svaka $životinja u kljunaru, lavu, ovci, golubu ( .#($animal)-icon ( background-image: url("/images/#($animal).png") ) )

Rezultat kompilacije u CSS-u:

Platypus-icon (pozadinska slika: url("/images/platypus.png"); ) .lion-icon (pozadinska slika: url("/images/lion.png"); ) .sheep-icon ( background- slika: url("/images/sheep.png"); ) .dove-icon ( background-image: url("/images/dove.png"); )

@while direktiva

Direktiva @while uzima SassScript izraz i prolazi kroz stilove koje sadrži dok se izraz procjenjuje na true. Može se koristiti za stvaranje složenijih petlji nego što je pogodan @for, iako je rijetko potreban. Na primjer:

$indeks: 5; @while $index > 0 ( .element-#($index) ( width: 10px * $index; ) $index: $index - 1; )

Rezultat kompilacije:

Element-5 (širina: 50px;) .element-4 (širina: 40px;) .element-3 (širina: 30px;) .element-2 (širina: 20px;) .element-1 (širina: 10px;)

Funkcije u Sass/SCSS

Koristeći Sass/SCSS možete koristiti funkcije na isti način kao i u drugim jezicima.

Kreirajmo funkciju three-hundred-px() koja vraća 300px.

@function three-hundred-px() ( @return 300px; ) .name ( width: three-hundred-px(); border: 1px full gray; display: block; position: absolute; )

Nakon primjene class.name, širina elementa bit će 300 piksela.

Zdravo.

Funkcije u Sass-u mogu vratiti bilo koju valjanu CSS vrijednost i mogu se dodijeliti bilo kojem svojstvu. Mogu se čak izračunati na temelju proslijeđenog argumenta.

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

Trigonometrija

Trigonometrijske funkcije sin() i cos() često se nalaze kao ugrađene klase u mnogim jezicima, kao što je JavaScript na primjer.

Njihov rad vrijedi proučavati ako želite smanjiti vrijeme utrošeno na razvoj animacija korisničko sučelje, na primjer stvoriti trobber. Usput, o tome smo već govorili u jednom od članaka. Ali u ovom slučaju to će biti kod, a ne GIF slika umetnuta u HTML dokument.

U nastavku ćemo pogledati nekoliko primjera za stvaranje zanimljivih animacijskih efekata pomoću funkcije sin(), u kojoj je količina koda svedena na minimum. Zatim možete skalirati ovo znanje za stvaranje interaktivnih elemenata korisničkog sučelja (kretanje u krugu, valovita animacija).

Prednost korištenja trigonometrije u kombinaciji s CSS-om je u tome što nema dodatnih HTTP zahtjeva kao što je slučaj s gif slikama.

U Sassu možete pisati trigonometrijske funkcije. Pročitajte više o ovome.

Pisanje vlastitih funkcija

U trigonometriji se mnoge operacije temelje na funkcijama. Svaka se funkcija nadovezuje na drugu. Na primjer, rad() funkcija zahtijeva korištenje PI() . Funkcije cos() i sin() zahtijevaju upotrebu rad().

@funkcija PI() ( @return 3.14159265359; )

Pisanje funkcija u Sass/SCSS vrlo je slično pisanju funkcija u drugim jezicima.

Korištenje funkcije pow():

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i from 1 to $exp ( $value: $value * $number; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Korištenje rad() funkcije:

@function rad ($angle) ( $unit: jedinica ($angle); $unitless: $angle / ($angle *0 + 1); //Ako je vrijednost kuta u stupnjevima ("deg"), trebate pretvoriti to u radijane @if $unit == deg ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

Da biste izračunali tangens pomoću funkcije tan(), trebate koristiti funkcije sin() i cos().