Előfeldolgozó CSS: áttekintés, kiválasztás, alkalmazás

Abszolút minden tapasztalt webes tervezők használja a előfeldolgozó. Nincsenek kivételek. Ha azt szeretnénk, hogy sikerül ezt a tevékenységet, ne felejtsd el ezeket a programokat. Első pillantásra okozhatnak egy kezdő csendes horror - ez is hasonlít a programozást! Tény, hogy tudod kezelni mindazokat a funkciókat a CSS előfeldolgozó körülbelül egy nap, és ha megpróbálja, akkor egy pár órát. A jövőben, akkor jelentősen egyszerűsíti az életét.

Hogyan alakult ki a CSS előfeldolgozó

Ahhoz, hogy jobban megértsük a jellemzőit ezt a technológiát, röviden ásni a történelem, a vizuális megjelenítés a weblapok.

Ha csak most kezdődött a tömeges használata az internet, nem stíluslapok nem létezik. Végrehajtási dokumentumok függött teljes mértékben a böngésző. Mindegyikük volt saját stílusok, amelyeket kezelésére használt bizonyos címkéket. Ennek megfelelően, az oldalak függően eltérő a sorrendet, amelyben a böngésző megnyitja azokat. Az eredmény - a káosz, zavartság, a fejlesztők számára.

1994-ben a norvég tudós Håkon Lie kifejlesztett egy stíluslapot, hogy fel lehetne használni a megjelenése az oldalak külön a HTML-dokumentum. Az ötlet priglanulas tagjai a W3C, aki azonnal elindult, hogy teljessé. Néhány évvel később megjelent első változatát a CSS specifikáció. Aztán folyamatosan javult, véglegesítés alatt ... De az alapkoncepció maradt ugyanaz: minden stílus beállítása bizonyos tulajdonságait.

A CSS táblázatok mindig problematikus. Például a webes tervezők gyakran voltak problémái a rendezés és csoportosítás funkciók, és az öröklés nem olyan egyszerű.

És akkor jött a kétezredik. Jelölések egyre inkább kezdett, hogy vegyenek részt a szakmai front-end fejlesztő, ami fontos, hogy rugalmas és dinamikus munkastílus. Időpontjában fennálló követelte CSS előtagokat elhelyezése és nyomon követése támogatja az új képességeit a böngésző. Ezután a JavaScript, Ruby szakértők kapott az üzletet, ami egy előfeldolgozó - felépítmény CSS, új funkciók adunk hozzá.

CSS kezdőknek: előfeldolgozó funkciók

Ők több funkciója van:

• egységesítésére böngésző elő- és khaki;

• egyszerűsítése szintaxis;

• így a lehetőséget, hogy a beágyazott szelektor hiba nélkül;

• javítása logikai stílus.

Röviden: az elpárologtató hozzáteszi CSS programozás logikai képességeket. Most, styling nem hajtunk végre a szokásos tőzsdei stílusok és néhány egyszerű technikát és megközelítések: változók, függvények, nyálkahal, ciklusok feltételekkel. Ezen túlmenően, hogy képesek a matematika.

Látva a népszerűsége ezeknek bővítmények a W3C elkezdték fokozatosan hozzáadjuk a lehetőségét, azokat a CSS kódot. Például a leírásban így számított () függvény, amely támogatja a sok böngésző. Várható, hogy hamarosan lehetőség lesz meg változókat, és hozzon létre egy nyálkahal. Azonban ez fog történni a távoli jövőben, és preprocessors már itt van, és már működik is.

Népszerű preprocessors CSS. Sass

Úgy tervezték, 2007-ben. Eredetileg egy komponens Haml - a sablon HTML. Új funkciók a CSS elemek szabályozzák élvezte a fejlesztők a Ruby on Rails, amely akkor kezdődött, hogy elterjedt, hogy mindenhol. A Sass rengeteg funkciók, amelyek már bekerültek olyan előfeldolgozó: változók, beágyazását üzemmódváltó- nyálkahal (akkor viszont ezeket az érveket nem lehet hozzáadni).

Deklarálása változók Sass

Deklarált változók a $ jel. Ezek megőrzik tulajdonságaikat és készletek, például: "$ borderSolid: 1px solid red;". Ebben a példában azt nyilvánították nevű változó borderSolid, és mentette érték 1px solid piros. Most, ha a CSS létre kell hoznunk egy piros szegély szélessége 1 képpont, csak azt jelzi, hogy a változó után a tulajdonság nevét. A bejelentés után a változók nem lehet megváltoztatni. Számos beépített funkciókat. Például, hogy egy változót, amelynek értéke $ redcolor # FF5050. Most, a CSS kódot a tulajdonságok olyan elem, használhatjuk arra, hogy a betűtípus színe: p {color: $ redColor; }. Szeretné kísérletezni a színe? Használja funkció vagy sötétebbé. Ez azért történik így: p {szín: sötétebbé ($ redColor, 20%); }. Ennek eredményeként, a szín redColor lesz 20% -kal könnyebb.

A Sass sok beépített funkciókat. Érdemes legalább olvasni őket, de jobb - tanulni.

fészkelő

Korábban azt jelzi fészkelő kellett használni a hosszú és kényelmetlen design. Képzeljük el, hogy van egy div, ami p és ez viszont meghatározott span. A div, akkor be kell állítani a színét piros, p - sárga, a span - rózsaszín. Egy tipikus CSS lenne az alábbiak szerint történik:

div {

color: red;

}

div p {

szín: sárga;

}

div p span {

szín: rózsaszín;

}

CSS előfeldolgozó minden könnyebbé válik, és tömörebb:

div {

color: red;

p {

szín: sárga;

.span {

szín: rózsaszín;

}

}

}

Elements szó „befektetett” egymást.

preprocessor irányelvek

@import használatával irányelvek tud olvasni. Például, van fonts.sass fájlt, hogy kijelenti, a stílusok betűtípusokat. Csatlakoztassa a fő fájl style.sass: @import „betűtípus”. Kész! Ahelyett, hogy egy nagy fájlt a stílus van egy pár, hogy lehet használni a gyors és könnyű hozzáférést biztosít a kívánt tulajdonságokkal.

nyálkahal

Az egyik legérdekesebb ötleteket. Ez lehetővé teszi, hogy egy sort, hogy kérje a tulajdonságai. A következőképpen működik:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: Bold;

}

Nyálkahal alkalmazni az elem az oldalon, használja az irányelv @include. Például, azt szeretnénk, hogy alkalmazza azt a H1 fejléc. Jelenleg a következő szerkezetű: H1 {@include: largeFont; }

Minden tulajdonságait nyálkahal vannak rendelve egy h1 elemet.

preprocessor Kevesebb

Syntax Sass emlékeztet programozás. Ha keres egy lehetőség, amely jobban megfelel a kezdő tanuló CSS, meg kevesebb. Ebből jött létre 2009-ben. A fő jellemzője - támogatja a CSS natív szintaxist, ezért nem ismerik a programozás Imposer könnyebb lesz megtanulni.

A deklaráljuk a @ szimbólumot. Például: @fontSize: 14px;. Fészekrakó működik ugyanazon elvek, mint Sass. Nyálkahal bejelentette a következő: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: Bold; }. Ha csatlakozni nem szükséges használni előfeldolgozó direktívák - csak az újonnan készült nyálkahal a tulajdonságok a kiválasztott elem. Például: h1 {.largeFont; }.

Stylus

Tovább előfeldolgozó. Készült 2011-ben ugyanaz a szerző, hogy a világot a Jade, Express és egyéb hasznos termékek.

Változókat lehet nyilvánítani kétféleképpen - explicit vagy implicit módon. Például: font = 'Times New Roman'; - implicit opciót. De $ font = 'Times New Roman' - egyértelmű. Nyálkahal nyilvánítanak és implicit csatlakoztatva. A szintaxis a következő: redColor () piros színű. Most adjuk hozzá a elemet, például: h1 redColor ();.

Stylus első pillantásra úgy tűnhet érthetetlen. Hol van az a „natív” konzolok és pontosvessző? De szükséges, hogy sodorja bele, minden lesz sokkal világosabb. Ne feledje azonban, hogy a hosszú távú fejlődés ezen preprocessor lehet „elválaszt” használja a klasszikus CSS szintaxis. Ez gyakran okoz problémát, ha kelljen dolgozni egy „tiszta” stílusban.

Mi preprocessor válasszam?

Tény, hogy ez ... ez nem számít. Minden verzió hez közel azonos funkciók csak a szintaxis egyes más. Javasoljuk, hogy a következőképpen kell eljárni:

• ha - programozó és dolgozni szeretne stílusok mind kódot, a Sass;
• ha - egy kóder és dolgozni szeretne stílusok, mint a hagyományos elrendezés, figyelni, hogy a kisebb;
• ha úgy tetszik minimalizmus a tollal.

Valamennyi változatára végtelen számú érdekes könyvtárak, amelyek még tovább egyszerűsíti fejlődését. Felhasználók Sass ajánlott figyelni, hogy az Iránytű - egy hatékony eszköz a sok beépített funkciókat. Például a telepítés után soha nem kell aggódnia, az eladó változat előtagot. Egyszerűsíti dolgozni rácsok. Vannak eszközök dolgozó virágok, sprite. A tartomány már bejelentette nyálkahal. Adjon ez az eszköz egy pár napig - tehát akkor megment egy csomó időt és energiát a jövőben.