Eelprotsessori CSS: ülevaade, valik, taotluse

Absoluutselt kõik kogenud veebidisainerid kasutada eeltöötluse. Puuduvad erandeid. Kui soovite, et olla edukas selles tegevuses, ärge unustage neid programme. Esmapilgul võivad nad põhjustada algaja vaikne horror - see on liiga sarnane programmeerimine! Tegelikult saab käsitleda kõiki funktsioone CSS eeltöötluse umbes päevas, ja kui sa püüad, siis paar tundi. Tulevikus nad oluliselt lihtsustada oma elu.

Kuidas CSS eeltöötluse

Et paremini mõista omadused seda tehnoloogiat, lühidalt süveneda ajaloo visuaalses esitluses veebilehti.

Kui alles alanud massiline kasutamine internetis, ei stiili lehed ei eksisteeri. Execution dokumentide sõltus täielikult brauserit. Üks neist oli oma stiili, mida on kasutatud raviks teatud sildid. Seega lehekülgi teistmoodi sõltuvalt millises järjekorras brauseri avate neid. Tulemus - kaos, segasus, arendajatele.

Aastal 1994, Norra teadlane Håkon Lie töötanud -laaditabelite saaks kasutada välimus lehekülgi eraldi HTML-dokumenti. Idee priglanulas liikmed W3C, kes kohe sätestatud lõpuni. Paar aastat hiljem avaldas ta esimese versiooni CSS spetsifikatsioon. Siis ta pidevalt paranenud, viimistletakse ... Aga mõiste jäi kõik sama: iga stiili määrata teatud omadused.

Kasutades CSS tabelite on alati olnud problemaatiline. Näiteks veebi disainerid tihti olnud probleeme sorteerimine ja grupeerimine funktsioonide ja pärandist ei ole nii lihtne.

Ja siis tuli 2000.. Märgistused üha hakkas osalema professionaalne esiotsa arendajad, mis on oluline olla paindlik ja dünaamiline tööstiili. Eksisteerisid ajal nõudis CSS eesliiteid paigutuse ja jälgimise toetust uue võimeid brauserit. Siis, JavaScript ja Ruby eksperdid sain alla äri, luues eeltöötluse - pealisehitus CSS, uusi funktsioone lisatakse see.

CSS algajatele: eeltöötluse funktsioone

Neil on mitmeid funktsioone:

• ühendada brauseri eesliiteid ja khaki;

• lihtsustada süntaks;

• anda võimalus töötada koos pesastatud valijad ilma vigadeta;

• parandada loogika stiil.

Lühidalt: preprotsessoris lisab CSS programmeerimisloogikast võimeid. Nüüd stiil ei läbi tavalisi kirje stiile ja mõned lihtsad tehnikad ja meetodid: muutujad, funktsioonid, Pihklane, tsüklite tingimused. Lisaks võime kasutada matemaatika.

Nähes populaarsus need add-ins, W3C on hakanud tasapisi lisada võimalus neid CSS koodi. Näiteks spetsifikatsiooni nii et arvutatud () funktsiooni, mis toetavad paljud brauserid. On oodata, et varsti on see võimalik määrata muutujate ja luua Pihklane. Kuid see juhtub kauges tulevikus, ja eeltöötluse juba siin ja juba hästi.

Enim eelprotsessorid CSS. Sass

Disainitud 2007. Algselt osa Haml - malli HTML. Uued funktsioonid CSS elemente kontrollida meeldis arendajad Ruby on Rails, mis hakkas levima seda kõikjal. Sass suur hulk funktsioone, mis on nüüd lisatud ühtegi eeltöötluse: muutujad, kinnistades ja valijad, Pihklane (siis, aga need argumendid ei saa lisada).

Kuulutatakse muutujate Sass

Muutujad deklareeritud koos $ märk. Nad võivad säilitada oma omadused ja komplektid, näiteks: "$ borderSolid: 1px tahke punane;". Selles näites me deklareeritud muutuja nimega borderSolid ja salvestanud hindavad 1px tahke punane. Nüüd, kui CSS peame looma punase piiri laius 1px lihtsalt näitab, et muutuja pärast vara nimetus. Pärast väljakuulutamist muutujad ei saa muuta. On mitmeid sisseehitatud funktsioone. Näiteks kuulutada muutuja väärtus $ redcolor # FF5050. Nüüd, CSS koodi omadused mis tahes element, seda kasutada, et määrata värvi: p {color: $ redColor; }. Kas soovite katsetada värvi? Kasutage funktsiooni heledamaks või tumedamaks. Seda tehakse nii: p {color: tumedamaks ($ redColor, 20%); }. Selle tulemusena värvi redColor on 20% kergem.

Sass palju sisseehitatud funktsioone. Worth vähemalt neid lugeda, kuid parem - õppida.

pesitsevate

Varem näitamaks pesitsevate tuli kasutada pika ja ebamugav disain. Kujutage ette, et meil on div, mis on p, ja see omakorda määratud ajavahemiku. Sest div peame määrata värvi punane, p - kollane, SPAN - roosa. Tavalises CSS oleks teinud järgmiselt:

div {

värv: punane;

}

div p {

värvus: kollane;

}

div p span {

värv: roosa;

}

CSS eeltöötluse kõik muutub lihtsamaks ja kompaktne:

div {

värv: punane;

p {

värvus: kollane;

.span {

värv: roosa;

}

}

}

Elements sõna otseses mõttes "investeerida" üksteist.

eeltöötluse direktiivid

Kasutades @import direktiivid saab importida faile. Näiteks on meil fonts.sass fail, mis kuulutab stiile fonte. Ühendage see põhifailide style.sass: @import "fondid". Valmis! Selle asemel, et ühe suure faili stiile meil paar, mida saab kasutada kiiret ja lihtsat juurdepääsu vajalikule omadused.

Pihklane

Üks huvitavaid ideid. See võimaldab ühe rea küsida kogum omadusi. Juhi järgmiselt:

@mixin largeFont {

font-family: "Times New Roman";

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Pihklane taotleda element lehel, kasutage direktiiv @include. Näiteks tahame rakendada seda h1 kaudu. Meil on järgmise struktuuriga: h1 {@include: largeFont; }

Kõik omadused Pihklane kannavad h1 element.

eeltöötluse Vähem

Süntaks Sass meenutab programmeerimine. Kui otsite võimalust, et sobib rohkem algajatele õppimise CSS, vaata vähem. See loodi 2009. aastal. Põhijooneks - toetust CSS native süntaks, nii võõras programmeerimine Imposer on lihtsam õppida.

Muutujad on deklareeritud kasutades @ sümbol. Näiteks: @fontSize: 14px;. Pesitsevate töötab samade põhimõtete nagu Sass. Pihklane on teatanud järgmiselt: .largeFont () {font-family: "Times New Roman"; font-size: 64px; line-height: 80px; font-weight: bold; }. Ühendada see ei ole vajalik kasutada eeltöötluse direktiivid - lihtsalt lisada vastloodud Pihklane omaduste valitud element. Näiteks: h1 {.largeFont; }.

grammofoninõel

Teine eeltöötluse. Loodud 2011. aastal sama autori, et andis maailmale Jade, Express ja muud kasulikku.

Muutujad võib kuulutada kahel viisil - kas otseselt või kaudselt. Näiteks: font = 'Times New Roman'; - kaudne võimalus. Aga $ font = 'Times New Roman' - selge. Pihklane on deklareeritud ja kaudselt ühendatud. Süntaks on järgmine: redColor () punast värvi. Nüüd saame lisada objekt, näiteks: h1 redColor ();.

Stylus esimesel pilgul võib tunduda arusaamatu. Kus on "native" sulgudes ja semikoolonit? Aga see on vajalik süüvima see kõik muutub palju selgemaks. Pea meeles siiski, et pikaajalise arengu käesoleva eeltöötluse saab "võõrutada" te kasutate klassikalist CSS süntaksi. See põhjustab mõnikord probleeme, kui nad peavad töötama koos "puhas" stiilis.

Mis eeltöötluse valida?

Tegelikult see on ... see ei ole oluline. Kõik versioonid pakuvad umbes samu funktsioone lihtsalt süntaksi iga on erinev. Soovitame toimitakse järgmiselt:

• - kui te programmeerija ja soovite töötada stiile nii koodi, kasutage Sass;
• - kui te kooder ja soovite töötada stiile nagu tavalise paigutus, pöörama tähelepanu Vähem;
• kui sulle meeldib minimalism, krihvliga.

Kõikide variantide lõputu hulk huvitavaid raamatuid, mida saab veelgi lihtsustada arengut. Kasutajad Sass soovitatav pöörata tähelepanu Compass - võimas vahend paljude sisseehitatud funktsioone. Näiteks pärast selle installimist sa ei pea kunagi muretsema müüja versiooni eesliide. Lihtsustab tööd võrgud. On tööpingid lilled, sprites. Vahemikus juba teatanud Pihklane. Saada see tööriist paar päeva - seega säästate palju aega ja vaeva tulevikus.