Preprocessor CSS: oersjoch, seleksje, applikaasje

Absolutely alle betûfte web ontwerpers brûke de preprocessor. Der binne gjin útsûnderings. As jo wolle slagje yn dizze aktiviteit, ferjit oer dizze programma. Op it earste each, se kin in begjinnende rêstich horror - it is te ferlykjen mei de programmearring! Feitlik kinne jo omgean mei alle funksjes fan de CSS preprocessor foar likernôch in dei, en as jo besykje, dan in pear oeren. Yn 'e takomst, hja sille gâns simplify dyn libben.

Hoe die CSS preprocessor

Om better begripe de skaaimerken fan dizze technology, koart ferdjipje har yn 'e skiednis fan' e byldzjende presintaasje fan websiden.

Doe't mar krekt útein set mei de massale gebrûk fan it ynternet, gjin stylblêden net bestean. Utfiering fan dokuminten hongen foar folslein op 'e browser. Elk fan harren hie har eigen stilen, dy't brûkt wurdt foar de behanneling fan bepaalde tags. Accordingly, de siden sjogge oars ôfhinklik fan 'e oarder, dat de blêder jo iepenje se. It resultaat - it gaos, betizing, problemen foar ûntwikkelers.

Yn 1994, Noarsk wittenskipper Håkon Lie ûntwikkele in stylblêd dy't koenen brûkt wurde foar it oansjen fan 'e siden apart fan it HTML-dokumint. It idee priglanulas leden fan de W3C, dy't fuortendaliks set út ta foltôging. In pear jier letter publisearre er in earste ferzje fan de CSS spesifikaasje. Dêrnei wie se hieltyd ferbettere, wurdt definityf fêststeld ... Mar it begryp bleau allegearre itselde: elk styl set bepaalde eigenskippen.

Mei help fan CSS Tables hat altyd west problematysk. Bygelyks, web ûntwerpers faak hie problemen mei it sortearje en groepearjen funksjes, en erfskip is net sa ienfâldich.

En doe kamen de beide tûzenste. Opskriften wurde hieltyd mear begûn te ûntliene profesjonele front-ein ûntwikkelers, dat is wichtich om te wêzen fleksibele en dynamyske wurk stilen. Bestie op it stuit easke CSS foarheaksels pleatsen en folgjen stipe de nije mooglikheden fan 'e browser. Dan, by JavaSkript, en Ruby saakkundigen krigen del nei it bedriuwslibben, it meitsjen fan in preprocessor - boppebou foar CSS, nije funksjes wurde tafoege oan it.

CSS foar Beginners: preprocessor funksjes

Se hawwe ferskate funksjes:

• unify blêder foarheaksels en khaki;

• ferienfâldigjen syntaksis;

• jouwe de mooglikheid om te wurkjen mei briede selectors sûnder flaters;

• ferbetterje logika styling.

Koartsein: de preprocessor foeget CSS programmearring logika mooglikheden. No, styling wurdt net útfierd yn de wenstige fermelding fan stilen en mei in pear ienfâldige techniken en oanpak: fariabelen, funksjes, hagfish, fytst betingsten. Boppedat, it fermogen om te brûken wiskunde.

Besjoch de populariteit fan dizze tafoegings-ins, de W3C hawwe begûn om stadichoan foegjen de mooglikheid fan harren yn de CSS koade. Bygelyks, yn de spesifikaasje dus dêr Calc () funksje, dat wurdt stipe troch in protte browsers. It wurdt ferwachte dat gau sil wêze mooglik te stellen fariabelen en meitsje in hagfish. Lykwols, dat sil barre yn 'e fiere takomst, en preprocessors al hjir en al wurkje goed.

Popular preprocessors CSS. Sass

Ûntwurpen yn 2007. Oarspronklik in ûnderdiel Haml - in sjabloan HTML. Nije funksjes foar CSS eleminten bestjoere relished ûntwikkelers oan de Ruby op Rails, dy't begûn te ferspriede it oeral. De Sass in grut tal funksjes dy't no opnommen yn alle preprocessor: fariabelen, ynbêde fan selectors, hagfish (doe, lykwols, dizze arguminten kin net tafoege wurde).

Ferklearje fariabelen yn Sass

Fariabelen ferklearren mei de $ teken. Se kinne hanthavenje har eigenskippen en ûndergiet, bygelyks: "$ borderSolid: 1px solid reade;". Yn dit foarbyld, we útroppen ta fariabele neamd borderSolid en rêde it skatte 1px bêst read. No, as der yn it CSS wy moatte meitsje in reade grins breedte fan 1px, gewoan wiist dat fariabele nei it eigendom namme. Nei de oankundiging fan 'e fariabelen kinne net feroare wurde. Der binne ferskate ynboude funksjes. Bygelyks, ferklearje in fariabele mei in wearde fan $ redcolor # FF5050. No, yn de CSS-koade yn de eigenskippen fan in elemint, brûk dan mei dizze ynstelling de lettertype kleur: p {color: $ redColor; }. Wolle jo om te eksperimintearjen mei de kleur? Brûk funksje donkerder of lichter. Dit wurdt dien sa: p {color: tsjusterder ($ redColor, 20%); }. As gefolch, de kleur redColor sil 20% lichter.

De Sass soad ynboude funksjes. Worth op syn minst lêze se, mar better - te learen.

briedgebiet

Eartiids, oan te jaan briedgebiet moast mei in lange en ûngemaklik design. Yntinke dat wy hawwe in div, dat is p, en dêryn, yn beurt, set span. Foar de div, wy moatte set it lettertype kleur read, om p - giel, foar it span - roze. Yn in typyske CSS it soe dien wurde as folget:

div {

color: red;

}

div p {

color: giel;

}

div p span {

color: pink;

}

Mei CSS preprocessor alles wurdt makliker en kompakter:

div {

color: red;

p {

color: giel;

.span {

color: pink;

}

}

}

Eleminten letterlik "ynvestearre" inoar.

preprocessor rjochtlinen

Mei help fan @import rjochtlinen kin ymportearje triemmen. Bygelyks, wy hawwe fonts.sass triem dat ferklearret de stilen foar lettertypen. Ferbine it oan 'e wichtichste triem style.sass: @import' lettertypen '. Klear! Yn stee fan ien grutte triem mei de stilen wy hawwe in pear, dat brûkt wurde kin foar flugge en maklike tagong ta de fereaske eigenskippen.

hagfish

Ien fan de meast nijsgjirrige ideeën. It makket it mooglik ien line te freegje in set fan eigenskippen. Operearje as folget:

@mixin largeFont {

font-family: "Times New Roman ';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish ta te passen op it elemint op 'e side, brûk de rjochtline @include. Bygelyks, wy wolle tapasse it oan 'e h1 kop. Wy hawwe de neikommende struktuer: H1 {@include: largeFont; }

Alle eigenskippen fan hagfish wurde tawiisd in h1 elemint.

preprocessor Less

Syntax Sass herinnert programmearring. As jo op syk binne nei in opsje, dat is mear geskikt foar begjinners studearre CSS, sjoch foar Minder. It waard makke yn 2009. De wichtichste funksje - stipe foar CSS native syntaksis, dus ûnbekende mei Programming imposer dan sil makliker om te learen.

De fariabelen wurde ferklearre mei help fan de @ symboal. Bygelyks: @fontSize: 14px;. Briedgebiet wurken op deselde prinsipes as yn Sass. Hagfish wurde oankundige as folget: .largeFont () {font-family: "Times New Roman '; font-size: 64px; line-height: 80px; font-weight: bold; }. Ferbine it is net nedich om te brûken preprocessor rjochtlinen - krekt heakjen de nij oanmakke hagfish yn 'e eigenskippen fan' e selektearre elemint. Bygelyks: h1 {.largeFont; }.

Stylus

In oare preprocessor. Makke yn 2011 troch deselde skriuwer, dy't joech de wrâld de Jade, Express en oare nuttige produkten.

Fariabelen kin ferklearre yn twa manieren - of eksplisyt of ymplisyt. Bygelyks: font = 'Times New Roman'; - in ymplisite opsje. Mar $ font = "Times New Roman '- dúdlik. Hagfish wurde ferklearre en ymplisyt ferbûn. De syntaksis is as folget: redColor () kleur read. No kinne wy tafoegje it item, bygelyks: h1 redColor ();.

Stylus op earste eachopslach kin it lykje ûnbegryplik. Wêr is de "memmetaal" heakjes en puntkomma? Mar it is nedich om Plunge deryn, al wurdt folle dúdliker. Unthâld, lykwols, dat lange-termyn ûntwikkeling fan dizze preprocessor kin "wean" jo brûke it klassike CSS syntaksis. Dat soms feroarsaket problemen doe't hawwen om te wurkjen mei in 'suvere' styl.

Wat preprocessor kieze?

Yn feite is it ... dat docht der net ta. Alle ferzjes biede oer deselde funksjes krekt de syntaksis fan eltse is oars. Wy riede te gean as folget:

• as jo - programmeur en wolle wurkje mei stilen sawol yn koade, brûk de Sass;
• as jo - in Ute en wolle wurkje mei de stilen as mei de konvinsjonele opmaak, betelje omtinken oan it Minder;
• as jo wolle Minimalisme, brûke de Stylus.

Foar alle farianten fan in einleaze oantal nijsgjirrige biblioteken dat kin noch fierder ferienfâldigjen ûntwikkeling. Brûkers Sass aanbevolen om omtinken te jaan oan it Kompas - in krêftich ynstrumint mei in protte ynboude funksjes. Bygelyks, neidat jo ynstallearje it silst nea moatte soargen oer de ferkeaper ferzje prefix. Simplifies wurkje mei pealtsjes. Der binne ark foar it wurkjen mei blommen, Spritès. In berik al oankundige hagfish. Jou dit helpmiddel in pear dagen - dus jim sille besparje in soad tiid en ynspanning yn 'e takomst.