CSS forvinnari: yfirlit, val, umsókn

Algerlega, allir reyndar skipulag hönnuðir nota preprocessors. Það eru engar undantekningar. Ef þú vilt ná árangri í þessari starfsemi, ekki gleyma þessum forritum. Við fyrstu sýn geta þau valdið byrjandi rólegum hryllingi - þetta er of mikið eins og forritun! Reyndar geturðu skilið alla getu CSS forvinnsluaðila í um daginn, og ef þú reynir þá í nokkrar klukkustundir. Í framtíðinni munu þau verulega einfalda líf þitt.

Hvernig CSS preprocessors birtust

Til að öðlast betri skilning á eiginleikum þessa tækni, sökkva okkur stuttlega í sögu þróun sjónræna framsetning vefsíðna.

Þegar internetforritið var bara að byrja, voru engar stílblöð. Hönnun skjala var eingöngu á vöfrum. Hver þeirra hafði eigin stíl, sem voru notuð til að vinna úr tilteknum merkjum. Samkvæmt því virtust síðurnar mismunandi eftir því hvaða vafri þú opnaði þær í. Niðurstaðan er óreiðu, rugl, vandamál fyrir forritara.

Árið 1994 þróaði norska vísindamaðurinn Haakon Lee stílblöð sem gæti verið notaður til að hanna útliti síðunnar sérstaklega frá HTML skjalinu. Hugmyndin var boðið til fulltrúa W3C hópsins, sem byrjaði strax að vinna að því. Nokkrum árum síðar var fyrsta útgáfa af CSS forskriftinni birt. Þá var stöðugt bætt, bætt ... En hugtakið var það sama: hver stíll er gefinn ákveðnar eignir.

Notkun CSS töflna hefur alltaf valdið nokkrum vandræðum. Til dæmis átti kóða oft erfitt með að flokka og flokka eignir og arfleifð er ekki svo einföld.

Og þá komu tvö þúsundasta. Sérfræðingarnir á framhliðinni byrjaði að gera merkingu oftar, en sveigjanleg og öflug vinna með stílum var mikilvægt. The CSS sem var til staðar á þeim tíma sem krafist er forskeyti og rekja stuðning við nýjar aðgerðir vafrans. Þá komu JavaScript og Ruby sérfræðingarin í rekstur, skapa forvinnsluforrit - viðbætur fyrir CSS, bæta nýjum eiginleikum við það.

CSS fyrir byrjendur: lögun preprocessors

Þeir framkvæma nokkrar aðgerðir:

• Sameina forskeyti vafra og hacks;

• Einfaldaðu setningafræði;

• Leyfa að vinna með hreiður valsar án villur;

• Bæta rökfræði stíl.

Í stuttu máli: preprocessor bætir forritunarmálum við CSS getu. Nú er stíll framkvæmt ekki með venjulegum upptalningu stíll, en með hjálp nokkurra einfaldra bragðarefna og aðferða: breytur, aðgerðir, myxín, hringrás, aðstæður. Að auki varð hægt að nota stærðfræði.

Sjá vinsældir slíkra viðbótanna, W3C byrjaði að smám saman bæta við eiginleikum frá þeim í CSS númerið. Til dæmis, calc () virknin birtist í forskriftinni, sem er studd af mörgum vöfrum. Búist er við að fljótlega verður hægt að stilla breytur og búa til myxín. Hins vegar mun þetta gerast í fjarlægum framtíð, og preprocessors eru nú þegar hér og eru nú þegar að vinna fullkomlega.

Vinsælir CSS preprocessors. Sass

Það var þróað árið 2007. Það var upphaflega hluti af Haml, HTML sniðmátvélinni. Nýjar aðgerðir til að stjórna CSS þætti hafa komið til bragða verktaki á Ruby on Rails, sem byrjaði að breiða það út alls staðar. Í Sass birtist mikið af tækifærum sem eru nú í hvaða forvera sem er: breytur, embedding selectors, mixins (þá gætirðu ekki bætt við rökum þeim).

Lýsa breytur í Sass

Variables eru lýst með því að nota $ táknið. Í þeim er hægt að vista eiginleika og setur þeirra, til dæmis: "$ borderSolid: 1px solid red;". Í þessu dæmi lýsti við breytu sem heitir borderSolid og geymdi gildi 1px solid rauður í henni. Nú, ef í CSS þurfum við að búa til rauða landamæri með breidd 1px, tilgreinir einfaldlega þessa breytu eftir heiti eignarinnar. Eftir yfirlýsingu er ekki hægt að breyta breyturnar. Nokkrar innbyggðar aðgerðir eru í boði. Til dæmis, lýsa breytu $ redColor með gildi # FF5050. Nú, í CSS, í eiginleika frumefni, notum við það til að stilla leturlitinn: p {lit: $ redColor; }. Viltu gera tilraunir með lit? Notaðu aðgerðirnar myrkva eða létta. Þetta er gert eins og þetta: p {lit: dimma ($ redColor, 20%); }. Þar af leiðandi mun liturinn af RedColor vera 20% léttari.

Sass hefur marga innbyggða aðgerðir. Við mælum með að þú kynnir þig að minnsta kosti og betur - læra.

Nesting

Áður, til að tákna hreiður, þurftum við að nota langa og óþægilegan hönnun. Ímyndaðu þér að við eigum div þar sem p liggur, og í því aftur er spennan. Fyrir div, þurfum við að stilla leturlitinn að rauðum, fyrir p-gulur, fyrir span-bleikur. Í venjulegu CSS myndi þetta vera svona:

Div {

Litur: rautt;

}

Div p {

Litur: gult;

}

Div p span {

Litur: bleikur;

}

Með CSS preprocessor er allt auðveldara og samningur:

Div {

Litur: rautt;

P {

Litur: gult;

.span {

Litur: bleikur;

}

}

}

Þættir eru bókstaflega "settar" í annað.

Forvinnslufyrirmæli

Með @import tilskipuninni er hægt að flytja inn skrár. Til dæmis höfum við skrá sem kallast fonts.sass, þar sem stíll fyrir leturgerðir eru lýst. Við tengjum það við helstu style.sass skrá: @import 'letur'. Gert! Í staðinn fyrir eina stóra skrá með stílum höfum við nokkra sem hægt er að nota til að fá fljótt og auðveldlega aðgang að nauðsynlegum eiginleikum.

Mixins

Einn af áhugaverðustu zadumok. Það gerir eitt sett af eignum kleift að tilgreina í einni línu. Prjónið sem hér segir:

@mixin bigFont {

Font-fjölskylda: "Times New Roman";

Leturstærð: 64px;

Línahæð: 80px;

Leturstærð: feitletrað

}

Til að nota mixin við þáttur á síðu skaltu nota @include tilskipunina. Til dæmis viljum við sækja um það á h1 hausinn. Eftirfarandi smíði er fengin: h1 {@include: largeFont; }

Allar eignir frá mixin verða úthlutað til frumefnisins h1.

Minna forvinnari

Sass setningafræði minnir á forritun. Ef þú ert að leita að valkosti sem er hentugur fyrir nemendur sem læra CSS fyrir byrjendur, gaum að Minna. Það var stofnað árið 2009. Helstu eiginleiki er stuðningur við innfæddur CSS setningafræði, svo það er auðveldara að læra það með ókunnugum sem eru ekki kunnugir forritun kóðara.

Variables eru lýst með @ tákni. Til dæmis: @fontSize: 14px;. Nesting virkar á sömu grundvallarreglum og í Sass. Mixins eru lýst sem hér segir: .largeFont () {font-family: 'Times New Roman'; Leturstærð: 64px; Línahæð: 80px; Leturstærð: feitletrað }. Til tengingar þarftu ekki að nota fyrirframvinnslufyrirmæli. Bættu bara við nýju blandaðri samhengi við eiginleika valda hluta. Til dæmis: h1 {.largeFont; }.

Stíll

Annar preprocessor. Búið til árið 2011 af sama höfundi sem gaf heiminum Jade, Express og aðrar gagnlegar vörur.

Breytur geta verið lýst á tvo vegu - sérstaklega eða óbeint. Til dæmis: font = 'Times New Roman'; Er óbein valkostur. En $ font = 'Times New Roman' - skýrt. Mixins eru lýst og tengdir óbeint. Setningafræði er: redColor () litróf. Nú getum við bætt því við frumefni, til dæmis: h1 redColor ();.

Við fyrstu sýn getur Stylus virst óskiljanlegt. Hvar eru "innfæddir" sviga og hálfkúlur? En ef þú bara kafa inn í það, verður allt miklu skýrara. Hins vegar skaltu hafa í huga að langur þróun með þessum forvinnsluvél getur "afveg" þér til að nota klassískt CSS setningafræði. Þetta veldur stundum vandamál þegar þú þarft að vinna með "hreinum" stílum.

Hvaða preprocessor ætti ég að velja?

Reyndar skiptir það ekki máli. Allir valkostir veita u.þ.b. sömu möguleika, bara setningafræði hvers er öðruvísi. Við mælum með því að þú haltir áfram með eftirfarandi hætti:

• Ef þú ert forritari og langar að vinna með stíl sem kóða skaltu nota Sass;
• Ef þú ert útlitshönnuður og langar að vinna með stílum eins og venjulega útlitið skaltu borga eftirtekt til Minna;
• Ef þú vilt naumhyggju skaltu nota Stylus.

Fyrir alla valkosti er fáanlegur fjöldi áhugaverða bókasafna sem geta frekar einfalt þróunina. Notendur Sass er bent á að fylgjast með Compass - öflug tól með mörgum innbyggðum eiginleikum. Til dæmis, eftir að þú hefur sett það upp, verður þú aldrei að hafa áhyggjur af seljandaforskeyti. Einfaldari vinna með grids. Það eru tólum til að vinna með litum, sprites. A tala af þegar lýst yfir myxínum eru í boði. Gefðu þessu verkfæri nokkra daga - þannig að spara þér mikinn tíma og orku í framtíðinni.