CSS preprocesor: pregled, izbor, primjena

Apsolutno svi iskusni dizajneri rasporeda koriste predprocesore. Nema iznimaka. Ako želite uspjeti u ovoj aktivnosti, nemojte zaboraviti o tim programima. Na prvi pogled, oni mogu uzrokovati početni mirni horor - to je previše slično programiranju! Zapravo, možete razumjeti sve mogućnosti predprocesora CSS-a za oko jedan dan, a ako pokušate, onda za nekoliko sati. U budućnosti će značajno pojednostaviti vaš život.

Kako se pojavljuju prednoprocesori CSS-a

Da bismo bolje razumjeli značajke ove tehnologije, kratko uronimo u povijest razvoja vizualnog prikaza web stranica.

Kada je masovna internetska aplikacija tek počela, nije bilo stila. Dizajn dokumenata ovisi isključivo o preglednicima. Svaki od njih imao je svoje stilove, koji su se koristili za obradu određenih oznaka. U skladu s tim, stranice izgledaju različite, ovisno o tome koji ste preglednik otvorili. Rezultat je kaos, konfuzija, problemi za programere.

1994. godine norveški znanstvenik Haakon Lee razvio je list stila koji bi se mogao koristiti za oblikovanje izgleda stranice odvojeno od HTML dokumenta. Ideja je pozvana predstavnicima konzorcija W3C, koji su odmah počeli raditi na tome. Nekoliko godina kasnije, objavljena je prva verzija CSS specifikacije. Tada se stalno popravljao, finaliziran je, ali koncept ostaje isti: svaki stil ima određena svojstva.

Korištenje CSS tablica uvijek je izazvalo neke probleme. Na primjer, koder često ima poteškoća pri razvrstavanju i grupiranju svojstava, a nasljedstvo nije tako jednostavno.

A onda je došao dvjesta tisućiti. Profesionalni front-line programeri počeli su označavati češće, zbog čega je fleksibilan i dinamičan rad s stilovima bio važan. CSS koji je postojao u to vrijeme zahtijevao je prefiks i podršku za praćenje novih značajki preglednika. Zatim su jаvascript i Ruby stručnjaci spustili se u posao, stvarajući predprocesore - dodatke za CSS, dodavajući joj nove značajke.

CSS za početnike: značajke predprocesora

Oni obavljaju nekoliko funkcija:

• Unifikiranje prefiksa preglednika i hakiranja;
• pojednostaviti sintaksu;
• Dopustite rad s ugniježđenim selektorima bez pogrešaka;
• poboljšati logiku stylinga.

Ukratko: predprocesor dodaje programskoj logici CSS sposobnostima. Stiliranje se ne izvodi uobičajenim nabrajanjem stilova, već pomoću nekoliko jednostavnih tehnika i pristupa: varijabli, funkcija, meksina, ciklusa, uvjeta. Osim toga, postalo je moguće koristiti matematiku.

Vidjevši popularnost takvih dodataka, W3C je počeo postupno dodavati značajke iz njih u CSS kod. Na primjer, funkcija calc () pojavila se u specifikaciji, koju podržavaju mnogi preglednici. Očekuje se da će uskoro biti moguće postaviti varijable i stvoriti meksine. Međutim, to će se dogoditi u dalekoj budućnosti, a predprocesori su već ovdje i već rade savršeno.

Popularni preprocesori CSS-a. Sass

Razvijen je 2007. godine. U početku, to je bio sastavni dio Haml, HTML predložak motora. Nove značajke manipuliranja elementima CSS-a došle su do okusa Ruby on Rails razvojnih programera, koje su počele distribuirati svugdje. SRS ogroman broj mogućnosti koje su sada uključene u bilo predprocesoru: varijablama, ugradnja selektora, sljepulje (tada, međutim, ne može biti dodan ti argumenti).

Deklaracije varijabli u Sassu

Varijable se objavljuju pomoću znaka $. U njima možete spremiti svojstva i njihove postavke, na primjer: "$ borderSolid: 1px solid red;". U ovom smo primjeru proglasili varijablu pod nazivom borderSolid i pohranili vrijednost 1px solid crvena u njemu. Sada, ako u CSS-u moramo stvoriti crvenu granicu sa širinom od 1 px, jednostavno navedemo ovu varijablu nakon naziva imovine. Nakon što se varijable deklaracije ne mogu mijenjati. Dostupne su nekoliko ugrađenih funkcija. Na primjer, izjavite varijablu $ redColor s vrijednošću # FF5050. Sada, u CSS, u svojstvima elementa, koristimo ga za određivanje boje fonta: p {color: $ redColor-}. Želite li eksperimentirati s bojom? Funkcije se zatamnjuju ili olakšavaju. To je učinjeno ovako: p {color: darken ($ redColor, 20%) -}. Kao rezultat toga, crvena boja boje će biti 20% lakša.

Sass ima mnoge ugrađene funkcije. Preporučujemo da se barem upoznate s njima i bolje - naučite.

traženje gnijezda

Prije, za označavanje gniježđenja, morali smo koristiti dugu i neprikladnu konstrukciju. Zamislite da imamo div u kojem p leži, au njemu, zauzvrat, je raspon. Za div, moramo postaviti crvenu boju crvene boje, za p-žute, za raspršenu rozu. U običnom CSS-u, to bi bilo učinjeno ovako:

div {

boja: crvena;

}

div p {

boja: žuta;

}

div p span {

boja: ružičasta;

}

S predprocesorom CSS sve je lakše i kompaktnije:

div {

boja: crvena;

p {

boja: žuta;

.span {

boja: ružičasta;

}

}

}

Elementi se doslovno "stavljaju" u drugi.

Preprocesor direktive

Pomoću @import direktive možete uvesti datoteke. Na primjer, imamo fonts.sass datoteka, u kojem se deklariraju stilovi za fontove. Spojimo ga na glavni style.sass datoteku: @import lsquo-fontsrsquo-. Gotovo! Umjesto jedne velike datoteke s stilovima, imamo nekoliko koji možete koristiti za brzo i jednostavno pristupanje traženim svojstvima.

sljepulje

Jedan od najzanimljivijih zadumaca. Omogućuje određivanje jednog skupa svojstava u jednoj liniji. Radite na sljedeći način:

@mixin bigFont {

font-family: lsquo-Times New Romanrsquo-;

veličina slova: 64px;

visina linije: 80px;

font-weight: bold;

}

Da biste primijenili mixin elementu na stranici, upotrijebite direktivu @include. Na primjer, želimo ga primijeniti na zaglavlje h1. Dobivena je sljedeća konstrukcija: h1 {@include: largeFont-}

Sve osobine iz miksina bit će dodijeljene elementu h1.

Manje predprocesora

Sassova sintaksa podsjeća na programiranje. Ako tražite opciju koja je pogodnija za početnike CSS studente, obratite pozornost na Manje. Osnovana je 2009. godine. Glavna značajka je podrška za izvorni CSS sintaksu, pa je lakše naučiti ga za one koji nisu upoznati s programiranjem.

Varijable se označavaju simbolom @. Na primjer: @fontSize: 14px;. Gniježđenje radi na istim principima kao u Sassu. Mixini su deklarirani kako slijedi: .largeFont () {font-family: lsquo-Times New Romanrsquo - font-size: 64px; visina linije: 80px; font-weight: bold-}. Za povezivanje ne morate upotrebljavati preprocesorske smjernice - dodajte svježe stvoren miks na svojstva odabranog elementa. Na primjer: h1 {.largeFont-}.

gramofonska igla

Još jedan predprocesor. Stvorio je u 2011. godini isti autor koji je dao svijet Jade, Express i ostale korisne proizvode.

Varijable se mogu deklarirati na dva načina - izričito ili implicitno. Na primjer: font = lsquo-Times New Romanrsquo-- je implicitna opcija. Ali $ font = lsquo-Times New Romanrsquo-eksplicitan. Mixini su implicitno deklarirani i povezani. Sintaksa je: redColor () crvena boja. Sada ga možemo dodati elementu, na primjer: h1 redColor () -.

Na prvi pogled, Stylus se može činiti neshvatljivim. Gdje su "nativne" zagrade i točke zarezima? No, samo je potrebno zaroniti u nju, jer sve postaje mnogo jasnije. Međutim, imajte na umu da dugi razvoj s ovim preprocessorom može "odvojiti" od vas da koristite klasičnu sintaksu CSS-a. To ponekad uzrokuje probleme kada trebate raditi s "čistim" stilovima.

Koji predprocesor trebam odabrati?

Zapravo, to nije važno. Sve opcije pružaju iste mogućnosti, samo je sintaksa svake od njih drugačija. Preporučujemo da postupite na sljedeći način:

• ako ste programer i želite raditi sa stilovima kao kod, koristite Sass;
• ako ste dizajner izgleda i želite raditi s stilovima kao u uobičajenom izgledu, obratite pozornost na Manje;
• ako vam se sviđa minimalizam, upotrijebite Stylus.

Za sve opcije dostupan je veliki broj zanimljivih knjižnica, što može dodatno pojednostaviti razvoj. Korisnicima tvrtke Sass savjetuje se da obratite pozornost na Compass - moćan alat s mnogim ugrađenim značajkama. Na primjer, nakon instalacije, nikad se nećete morati brinuti o prefiksu dobavljača. Jednostavnije rad s rešetkama. Postoje alate za rad s bojama, sprites. Dostupni su brojni već deklarirani meksini. Dajte ovom alatu nekoliko dana - time ćete uštedjeti puno vremena i energije u budućnosti.