Preprocessor CSS: kuvaus, valinta, sovellus

Ehdottomasti kaikki kokeneet web-suunnittelijat käyttävät Esikäsittelijän. Ei ole olemassa poikkeuksia. Jos haluat menestyä tässä toiminnassa, älä unohda näitä ohjelmia. Ensi silmäyksellä, ne voivat aiheuttaa noviisi hiljainen kauhu - se on liian samankaltainen ohjelma! Itse voit käsitellä kaikkia ominaisuuksia CSS esikäsittelijään noin vuorokauden, ja jos yrität, sitten pari tuntia. Tulevaisuudessa ne merkittävästi yksinkertaistaa elämääsi.

Miten CSS esikäsittelijään

Ymmärtämään paremmin ominaisuuksia tämän teknologian, lyhyesti sukeltaa historiaan visuaalisen esityksen verkkosivuja.

Kun vasta alkanut massiivinen Internetin käytön, ei tyylitiedostot ei ollut olemassa. Execution asiakirjojen riippui kokonaan selaimessa. Jokainen niistä oli oma tyyli, jota on käytetty hoidettaessa tiettyjä tunnisteita. Niinpä sivut näyttää erilaiselta, missä järjestyksessä selain avaat ne. Tulos - kaaos, sekavuus, ongelmat kehittäjille.

Vuonna 1994 Norja tiedemies Håkon Lie kehittänyt tyylisivu, joka voitaisiin käyttää ulkonäkö sivujen erillään HTML-dokumentti. Ajatus priglanulas W3C: n jäseninä, joka välittömästi lähti loppuun. Muutamaa vuotta myöhemmin hän julkaisi ensimmäisen version CSS spesifikaation. Sitten hän oli jatkuvasti parantunut, viimeistelyvaiheessa ... mutta käsite pysyi kaikki samaa: kunkin tyylin asettaa tiettyjä ominaisuuksia.

CSS taulukot on aina ollut ongelmallista. Esimerkiksi web-suunnittelijat usein ollut ongelmia lajittelu ja ryhmittely ominaisuuksia, ja perintö ei ole niin yksinkertaista.

Ja sitten tuli kahdestuhannes. Merkinnät ovat yhä alkoi harjoittaa ammatillista etupään kehittäjille, mikä on tärkeää olla joustava ja dynaaminen työn tyylejä. Vallinneet vaati CSS etuliitteitä sijoitus ja seuranta tukevat uusia ominaisuuksia selaimen. Sitten, JavaScript, ja Ruby asiantuntijat keskittyi olennaiseen, luoda esikäsittelijään - korirakenteen CSS, uusia ominaisuuksia lisätään siihen.

CSS aloittelijoille: esikäsittelijään ominaisuuksia

Heillä on useita tehtäviä:

• yhtenäistää selain etuliitteitä ja khaki;

• yksinkertaistaa syntaksi;

• antavat mahdollisuuden työskennellä sisäkkäisiä valitsimet virheittä;

• parantaa logiikka muotoilu.

Lyhyesti: Esikäsittelijän lisää CSS ohjelmoinnin logiikka valmiuksia. Nyt muotoilu ei suoriteta tavalliseen listaus tyylejä ja muutamalla tekniikoita ja lähestymistapoja: muuttujia, funktioita limanahkiaisia, sykliä olosuhteita. Lisäksi kyky käyttää matematiikkaa.

Nähdessään suosio näitä apuohjelmia, W3C ovat alkaneet vähitellen lisätä mahdollisuus niitä CSS. Esimerkiksi selityksessä joten laskettu () funktio, joka tukee monia selaimet. On odotettavissa, että pian se on mahdollista asettaa muuttujia ja luoda limanahkiaissaaliisiin. Kuitenkin tämä tapahtuu kaukaisessa tulevaisuudessa, ja esiprosessorit jo täällä ja jo toimivat hyvin.

Suosittu esiprosessorit CSS. nenäkkyys

Suunniteltu vuonna 2007. Alunperin komponentti HAML - mallin HTML. Uusia ominaisuuksia CSS elementit ohjaamaan nautti kehittäjille Ruby on Rails, joka alkoi levitä sitä kaikkialla. Sass valtava määrä ominaisuuksia, jotka sisältyvät nyt missään esikäsittelijään: muuttujat, upottamisen valitsinluettelot, limanahkiaisia (niin kuitenkin näitä väitteitä ei voi lisätä).

Julistaa muuttujia Sass

Muuttujat julisti kanssa $ merkki. Ne voivat säilyttää ominaisuudet ja erät, esimerkiksi: "$ borderSolid: 1px palava punainen;". Tässä esimerkissä olemme julisti muuttuja nimeltä borderSolid ja tallentanut sen arvostavat 1px punaisiksi. Nyt, jos CSS meidän täytyy luoda punaisen rajan leveys 1px yksinkertaisesti ilmaisee, että muuttuja jälkeen ominaisuuden nimi. Julkistuksen jälkeen muuttujia ei voi muuttaa. On olemassa useita sisäänrakennettuja toimintoja. Esimerkiksi julistaa muuttuja, jonka arvo on $ redcolor # FF5050. Nyt CSS ominaisuuksissa mitään elementtiä, sen kautta asetettava fontin väriä: p {color: $ redColor; }. Haluatko kokeilla väriä? Käytä toimintoa tummentaminen tai vaalentaminen. Tämä tapahtuu niin: p {väri: tummumista ($ redColor, 20%); }. Seurauksena, väri redColor on 20% kevyempi.

Sass monia sisäänrakennettuja toimintoja. Arvoinen ainakin lukea niitä, mutta parempi - oppia.

pesintä

Aiemmin ilmoittamaan pesiviä joutui käyttämään pitkiä ja epämiellyttävä suunnitteluun. Kuvitella, että meillä on div, joka on p, ja se puolestaan asettaa span. Div, meidän täytyy asettaa fontin väri punainen, p - keltainen, että span - vaaleanpunainen. Tyypillisessä CSS olisi tehdä seuraavasti:

div {

väri: punainen;

}

div p {

väri: keltainen;

}

div p span {

väri: vaaleanpunainen;

}

CSS preprocessor kaikki helpottuu ja kompaktimpi:

div {

väri: punainen;

p {

väri: keltainen;

.span {

väri: vaaleanpunainen;

}

}

}

Elementit kirjaimellisesti "sijoitetun" toisiaan.

preprocessor direktiivien

Käyttämällä @import direktiivien tuoda tiedostoja. Esimerkiksi meillä fonts.sass tiedosto, joka julistaa tyylejä fontteja. Kytke se päätiedostoon style.sass: @import 'fontit'. Valmis! Sen sijaan, että yhden suuren tiedoston tyylejä meillä on muutamia, jotka voidaan käyttää nopeasti ja helposti haluttuun ominaisuuksia.

limanahkiaissaaliisiin

Yksi mielenkiintoisimmista ideoista. Se mahdollistaa yhden rivin kysyä joukon ominaisuuksia. Toimivat seuraavasti:

@mixin largeFont {

font-family: 'Times New Roman';

fontti-koko: 64px;

line-height: 80px;

fontti-paino: lihavoitu;

}

Limanahkiaissaaliisiin hakea elementin sivulla, käyttää direktiiviä @include. Esimerkiksi haluamme soveltaa sitä H1 otsikkoa. Meillä on seuraava rakenne: h1 {@include: largeFont; }

Kaikki ominaisuudet limanahkiaissaaliisiin ovat osoitetaan h1 elementti.

preprocessor Vähemmän

Syntax Sass muistuttaa ohjelmointia. Jos etsit vaihtoehto, joka sopii paremmin aloittelijoille opiskeluun CSS, etsiä vähemmän. Se perustettiin vuonna 2009. Tärkein ominaisuus - CSS-tuki syntyperäinen syntaksin, joten tunne ohjelmointia imposer se on helpompi oppia.

Muuttujat ilmoitetaan käyttämällä @ -merkin. Esimerkiksi: @fontSize: 14px;. Pesiä toimii samoilla periaatteilla kuin Sass. Limanahkiaissaaliisiin ilmoitetaan seuraavasti: .largeFont () {font-family: 'Times New Roman'; fontti-koko: 64px; line-height: 80px; fontti-paino: lihavoitu; }. Liittää se ei ole välttämätöntä käyttää esikäsittelijään direktiivien - lisää vain uusille limanahkiaissaaliisiin ominaisuuksissa valittu elementti. Esimerkiksi: h1 {.largeFont; }.

neula

Toinen preprocessor. Luotu vuonna 2011 saman tekijän, joka antoi maailmalle Jade, Express ja muita hyödyllisiä tuotteita.

Muuttujat voidaan julistaa kahdella tavalla - joko suoraan tai epäsuorasti. Esimerkiksi: font = 'Times New Roman'; - implisiittinen vaihtoehto. Mutta $ font = 'Times New Roman' - kirkas. Limanahkiaissaaliisiin julistetaan ja epäsuorasti kytketty. Syntaksi on seuraava: redColor () väri punainen. Nyt voimme lisätä alkion, esimerkiksi: H1 redColor ();.

Kynää Ensi silmäyksellä saattaa tuntua käsittämättömältä. Missä on "alkuperäinen" suluissa ja puolipisteitä? Mutta on tarpeen sukeltaa sen, kaikki tulee paljon selkeämpi. Muista kuitenkin, että pitkän aikavälin kehitystä tämän esikäsittelijään voi "vieroittaa" käytät klassista CSS syntaksin. Tämä aiheuttaa joskus ongelmia, kun ottaa työskennellä "puhtaasta" tyyliin.

Mitä preprocessor valita?

Itse asiassa se on ... sillä ei ole väliä. Kaikki versiot tarjoavat suunnilleen samat ominaisuudet vain syntaksin jokainen on erilainen. Suosittelemme edetä seuraavasti:

• jos - ohjelmoija ja haluavat työskennellä tyylejä sekä koodin, käytä Sass;
• jos - kooderille ja halua työskennellä tyylejä tavanomaisen ulkoasun, kiinnitä huomiota vähemmän;
• Jos haluat minimalismia, kynällä.

Kaikkien varianttien loputon määrä mielenkiintoisia kirjastoja, jotka voivat entisestään yksinkertaistaa kehitystä. Käyttäjät Sass suositeltavaa kiinnittää huomiota Compass - tehokas väline monia sisäänrakennettuja ominaisuuksia. Esimerkiksi sen asennuksen jälkeen sinun ei tarvitse huolehtia myyjä versio etuliite. Helpottaa työskennellä ristikot. On työstökoneet kukkia, sprites. Erilaisia jo ilmoittanut limanahkiaissaaliisiin. Anna tämä työkalu pari päivää - näin säästät paljon aikaa ja vaivaa tulevaisuudessa.