Pirminio apdorojimo CSS: apžvalga, atranka, taikymas

Absoliučiai visi patyrę interneto dizaineriai naudoti procesorių. Yra jokių išimčių. Jei norite sėkmingai šioje veikloje, nepamirškite apie šias programas. Iš pirmo žvilgsnio, jie gali sukelti naujokas ramioje siaubo - tai per daug panašus į programavimą! Iš tiesų, jūs galite kovoti su visais CSS preprocesoriaus funkcijų maždaug per dieną, o jei bandysite, tai porą valandų. Ateityje jie bus žymiai supaprastinti savo gyvenimą.

Kaip padarė CSS procesorių

Norėdami geriau suprasti šios technologijos charakteristikas, trumpai pasinerti į vizualinį pateikimą tinklalapių istorijoje.

Kai tik prasidėjo masinis naudojimąsi internetu, nebuvo jokių stilių. Vykdymo dokumentų priklausė visiškai naršyklėje. Kiekvienas iš jų turėjo savo stilių, kurie buvo naudojami tam tikrų žymių gydymą. Todėl puslapiai atrodo kitaip, priklausomai nuo tam kurioje naršyklę atidaryti juos. Rezultatas - chaoso, sumišimas, problemos kūrėjams.

1994, norvegų mokslininkas Håkon Melas sukūrė stilių, kad gali būti naudojamas už puslapių išvaizda atskirai nuo HTML dokumente. Idėja priglanulas nariai W3C, kuris iš karto nustatyta, kad baigus. Po kelerių metų jis išleido pirmąją versiją CSS specifikaciją. Tada ji buvo nuolat tobulinama, yra baigtas ... Bet koncepcija išliko visi vienodi: kiekvienas stilius nustatyti tam tikras savybes.

Naudojant CSS lenteles visada buvo problemiškas. Pavyzdžiui, interneto dizaineriai dažnai turėjo problemų su rūšiavimo ir grupavimo funkcijas ir paveldėjimas yra ne taip paprasta.

Ir tada atėjo du tūkstantoji. Ženklinimas vis pradėjo verstis profesine front-end kūrėjams, kuri yra svarbi, kad būtų lankstus ir dinamiškas darbo stilių. Egzistavo tuo metu reikalavo CSS Priešdėliai vietą ir stebėjimo remti naujų pajėgumų naršyklėje. Tada, JavaScript ir Ruby ekspertai gavo žemyn į verslą, sukuriant procesorių - važiuoklės CSS, naujų funkcijų yra prie jo pridedamas.

CSS pradedantiesiems: preprocesoriaus funkcijos

Jie turi keletą funkcijų:

• suvienodinti naršyklės priešdėlių ir chaki;

• supaprastinti sintaksė;

• suteikti galimybę dirbti su lizdinė selektoriai be klaidų;

• pagerinti loginę stilių.

Trumpai: Preprocesorius prideda CSS programavimo logikos galimybes. Dabar, stilius nėra atliekamas įprastu sąrašą stilių ir su keletą paprastų būdų ir metodų: kintamieji, funkcijos, miksinų laimikiams, ciklai sąlygos. Be to, galimybė naudoti matematikos.

Matydamas šių papildinių populiarumą, W3C pradėjo palaipsniui pridėti į jų galimybes ir CSS kodą. Pavyzdžiui, specifikaciją todėl Calc () funkciją, kuri palaiko daug naršyklių. Tikimasi, kad netrukus bus galima nustatyti kintamuosius ir sukurti miksinų laimikiams. Tačiau tai įvyks tolimoje ateityje, ir pirminio apdorojimo procesoriai jau čia ir jau gerai.

Populiarus pirminio apdorojimo procesoriai CSS. Sass

Sukurta 2007 m. Iš pradžių komponentas Haml - šablonas HTML. Naujos funkcijos CSS elementų kontroliuoti mėgavosi kūrėjams apie Ruby on Rails, kuris pradėjo plisti visur. Sass daugybė funkcijų, kurios yra įtrauktos į bet preprocesoriaus: (tada, tačiau negali būti pridėta šie argumentai) kintamųjų, įterpimą selektoriai miksinų laimikiams.

Deklaruojantys kintamieji Sass

Kintamieji paskelbė su $ ženklu. Jie gali išlaikyti savo savybes ir rinkiniai, pavyzdžiui: "$ borderSolid: 1px solid red;". Šiame pavyzdyje, mes pareiškė kintamąjį vadinamą borderSolid ir išsaugoti jį vertiname 1px solid red. Dabar, jei į CSS turime sukurti raudonas kraštelis plotis 1px, tiesiog rodo, kad kintamasis po turto pavadinimas. Po kintamųjų paskelbimo negali būti pakeistas. Yra keletas vidinės funkcijos. Pavyzdžiui, deklaruoti kintamąjį, kurio vertė yra $ redcolor # FF5050. Dabar, CSS kodą į bet kurio elemento savybių, naudokite jį nustatyti šrifto spalvą: P {spalva: $ redColor; }. Ar norite eksperimentuoti su spalva? Naudokite funkciją patamsinti arba pašviesinti. Tai daroma taip: P {spalva: patamsinti ($ redColor, 20%); }. Kaip rezultatas, spalva redColor bus 20% lengvesnis.

Į Sass daug vidinės funkcijos. Verta bent juos skaityti, bet geriau - mokytis.

lizdus

Anksčiau nurodyti lizdus turėjo naudoti ilgai ir nepatogiai dizainą. Įsivaizduokite, kad mes turime div, kuri yra p, o tai, savo ruožtu, nustatykite trukmę. Dėl div, mes turime nustatyti šrifto spalvą raudona, P - geltona, už span - rausva. Be tipiškų CSS tai būtų daroma taip:

div {

spalva: raudona;

}

div p {

spalva: geltona;

}

div p span {

spalva: rožinė;

}

Su CSS preprocesoriaus visi tampa lengviau ir kompaktiškas:

div {

spalva: raudona;

p {

spalva: geltona;

.span {

spalva: rožinė;

}

}

}

Elementai pažodžiui "investavo" vienas kitą.

preprocesoriaus direktyvos

Naudojant @perkelti direktyvas galima importuoti failus. Pavyzdžiui, mes turime fonts.sass failą, kuris deklaruoja šriftų stilių. Prijunkite jį prie pagrindinio failo style.sass: @perkelti "šriftus". Priimta! Vietoj vieno didelio failo stilių turime mažai, kad gali būti naudojamas greitai ir lengvai prieiti prie reikalingų savybių.

miksinų laimikiams

Vienas iš labiausiai įdomių idėjų. Tai leidžia vieną eilutę užduoti savybių rinkinį. Veikia taip:

@mixin largeFont {

font-family: 'Times New Roman';

šrifto-dydis: 64px;

linija-aukštis: 80px;

font-weight: bold;

}

Miksinų laimikiams kreiptis į elemento puslapio, naudokite direktyvos @include. Pavyzdžiui, mes norime ją kreiptis į h1 antraštėje. Mes turėti tokią struktūrą: H1 {@include: largeFont; }

Visi miksinų laimikiams savybės priskiriamos H1 elemento.

Preprocesorius Mažiau

Sintaksės Sass primena programavimą. Jei ieškote variantą, kuris labiau tinka pradedantiesiems studijuoti CSS, ieškoti mažiau. Ji buvo sukurta 2009 m. Pagrindinis bruožas - parama CSS gimtąja sintakse, todėl susipažinę su programavimo Imposer bus lengviau mokytis.

Kintamieji yra deklaruojamos naudojantis simbolio @. Pavyzdžiui: @fontSize: 14px;. Įdėjimo darbai tais pačiais principais kaip ir Sass. Miksinų laimikiams skelbiami taip: .largeFont () {font-family: 'Times New Roman'; šrifto-dydis: 64px; linija-aukštis: 80px; font-weight: bold; }. Norėdami prijungti nėra būtina naudoti preprocesoriaus direktyvas - tiesiog pridėkite naujai sukurtą miksinų laimikiams į pasirinktą elementą savybių. Pavyzdžiui: h1 {.largeFont; }.

plunksna

Kitas Preprocesorius. Sukurta 2011 metais to paties autoriaus, kad davė pasauliui Jade, Express ir kitų naudingų produktų.

Kintamieji gali būti nurodomas dviem būdais - tiesiogiai arba netiesiogiai. Pavyzdžiui: šriftu = 'Times New Roman'; - numanoma galimybė. Bet $ šrifto = "Times New Roman" - aišku. Miksinų laimikiams deklaruojamos ir netiesiogiai prijungti. Sintaksė yra tokia: redColor () Spalva: raudona. Dabar mes galime pridėti elementą, pavyzdžiui: h1 redColor ();.

Plunksna ant pirmo žvilgsnio tai gali atrodyti nesuprantamas. Kur yra "gimtoji" gembės ir kabliataškis? Tačiau būtina pasinerti į jį, viskas tampa daug aiškiau. Tačiau atminkite, kad ilgalaikės raidos šio preprocesoriaus gali "atpratinti" naudojate klasikinį CSS sintaksė. Tai kartais sukelia problemų, kai turintys dirbti su "gryno" stiliaus.

Kas Preprocesorius pasirinkti?

Tiesą sakant, tai yra ... tai nesvarbu. Visos versijos pasiūlyti apie tas pačias funkcijas tik vienas sintaksė skiriasi. Rekomenduojame darykite taip:

• Jei - programuotojas ir norite dirbti su stilių tiek kodas, naudokite Sass;
• Jei - programuotojas ir norite dirbti su stiliais, kaip su įprastu išdėstymą, atkreipti dėmesį į mažiau;
• jei jums patinka minimalizmas, naudoti plunksna.

Visų begalinis skaičius įdomių bibliotekų, kurios gali dar labiau supaprastinti plėtrą variantų. Vartotojai Sass rekomenduojama atkreipti dėmesį į kompasą - galingas įrankis su daug built-in funkcijos. Pavyzdžiui, po to, kai jį įdiegti jums niekada nereikės nerimauti dėl pardavėjas versija priešdėlis. Supaprastina darbą su tinklų. Yra įrankiai dirbti su gėlėmis, sprites. Sritis jau paskelbė miksinų laimikiams. Padovanoti Šis įrankis porą dienų - taip sutaupysite daug laiko ir daug pastangų ateityje.