Réamhphróiseálaí CSS: forbhreathnú, roghnú, cur i bhfeidhm

Cinnte a úsáid go léir dearthóirí gréasáin taithí acu ar an réamhphróiseálaí. Níl aon eisceacht. Más mian leat go n-éireoidh sa ghníomhaíocht seo, ná déan dearmad faoi na cláir. Ar an gcéad amharc, d'fhéadfadh siad a chur faoi deara horror novice ciúin - tá sé ró-cosúil leis an cláir! Go deimhin, is féidir leat déileáil leis na gnéithe de CSS réamhphróiseálaí feadh thart ar an lae, agus má tá tú iarracht, ansin cúpla uair an chloig. Sa todhchaí, beidh siad shimpliú go suntasach do shaol.

Conas a rinne CSS réamhphróiseálaí

Chun tuiscint níos fearr ar na saintréithe na teicneolaíochta seo, delve go hachomair i stair an cur i láthair amhairc na leathanaigh Ghréasáin.

Nuair ach díreach tosaithe ar an úsáid ollmhór ar an Idirlíon, ní raibh aon stílbhileoga ann. Forghníomhú doiciméad ag brath go hiomlán ar an bhrabhsálaí. Gach ceann acu go raibh a stíl féin, a úsáideadh le haghaidh cóireáil clibeanna áirithe. Dá réir sin, ag féachaint ar na leathanaigh éagsúla ag brath ar an t-ord ina an bhrabhsálaí a osclaíonn tú iad. É an toradh - an chaos, mearbhall, fadhbanna d'fhorbróirí.

I 1994, d'fhorbair eolaí Ioruais Håkon Lie bileog stíle d'fhéadfaí a úsáid chun an cuma ar an leathanaigh ar leithligh ón HTML-doiciméid. Na comhaltaí priglanulas smaoineamh ar an W3C, a leagtar láithreach amach chun críche. Cúpla bliain ina dhiaidh d'fhoilsigh sé an chéad leagan den tsonraíocht CSS. Ansin bhí sí fheabhsú i gcónaí, á dtabhairt chun críche ... Ach d'fhan an coincheap léir mar an gcéanna: gach stíl a leagtar airíonna áirithe.

Ag baint úsáide as táblaí CSS curtha i gcónaí fadhbanna. Mar shampla, bhí dearthóirí gréasáin go minic fadhbanna le sórtáil agus grúpáil gnéithe, agus nach bhfuil oidhreacht chomh simplí.

Agus tháinig ansin an 2000. Marcálacha a thosaigh ag éirí níos chun dul i mbun fhorbróirí tosaigh deireadh ghairmiúil, rud atá tábhachtach a bheith stíleanna oibre solúbtha agus dinimiciúil. Ann ag an socrúchán am a theastaíonn CSS réimíreanna agus tacaíocht na cumais nua den bhrabhsálaí rianú. Ansin, ag JavaScript, agus saineolaithe Ruby fuair síos go dtí gnó, a chruthú réamhphróiseálaí - forstruchtúr haghaidh CSS, gnéithe nua a leanas leis é.

CSS do Thosaitheoirí: Gnéithe réamhphróiseálaí

Tá siad fheidhmeanna éagsúla:

• unify réimíreanna bhrabhsálaí agus khaki;

• chomhréir shimpliú;

• thabhairt ar an deis a bheith ag obair le roghnóirí neadaithe gan earráidí;

• feabhas a chur ar styling loighic.

I mbeagán focal: Cuireann an réamhphróiseálaí CSS cumais loighic cláir. Anois, nach bhfuil styling a dhéantar i liosta gnách de stíleanna agus le teicnící simplí cúpla agus cineálacha cur chuige: athróga, feidhmeanna, hagfish, timthriallta coinníollacha. Lena chois sin, an cumas chun an mhatamaitic a úsáid.

Seeing an tóir a bhí ar na mbreiseán orlach, tá an W3C tosaithe a chur leis de réir a chéile ar an bhféidearthacht acu sa chód CSS. Mar shampla, sa tsonraíocht sin níl Calc () fheidhm, a fhaigheann tacaíocht ó go leor brabhsálaithe. Táthar ag súil go luath agus beidh sé indéanta chun athróga a leagan síos agus a hagfish chruthú. Mar sin féin, beidh sé seo tarlú sa todhchaí i bhfad i gcéin, agus preprocessors cheana anseo agus ag obair go maith cheana féin.

preprocessors Coitianta CSS. Sass

Deartha i 2007. Ar dtús chomhpháirt Haml - a HTML teimpléad. Gnéithe nua do eilimintí CSS rialú forbróirí relished ar an Ruby ar Rails, a thosaigh a scaipeadh i ngach áit. An Sass líon mór de na gnéithe atá san áireamh anois in aon réamhphróiseálaí: athróg, neadú ar roghnóirí, hagfish (ansin, áfach, na hargóintí ní féidir é a chur leis).

athróg Ag dearbhú i Sass

Athróga dhearbhú leis an $ comhartha. Is féidir leo a choimeád ar bun a n-airíonna agus leagann sé, mar shampla: "$ borderSolid: 1px dearg soladach;". Sa sampla seo, a dhearbhú muid ag athróg a dtugtar borderSolid agus a shábháil sé luach dearg 1px soladach. Anois, más rud é sa CSS mór dúinn a chruthú ar leithead teorann dearg de 1px, léiríonn ach go athróg tar éis an t-ainm maoine. Tar éis an fhógra an athróg nach féidir iad a athrú. Tá roinnt-tógtha i feidhmeanna. Mar shampla, a dhearbhú athróg a bhfuil luach de $ redcolor # FF5050. Anois, an cód CSS i airíonna aon eilimint, é a úsáid a shocrú ar an dath an chló: p {Dath: $ redColor; }. Ar mhaith leat chun triail a bhaint an dath? Úsáid an gné Dorchaigh nó Éadromaigh. Déantar é seo ionas: p {Dath: Dorchaigh ($ redColor, 20%); }. Mar thoradh air sin, beidh an t-redColor dath a bheith 20% níos éadroime.

An leor Sass-tógtha i feidhmeanna. Fiú ar a laghad iad a léamh, ach níos fearr - a fhoghlaim.

neadaithe

Roimhe sin, neadaithe a chur in iúl go raibh a úsáid dearadh fada agus míchompordach. Samhlaigh gur féidir linn an div, a bhfuil p, agus i sé, ar a seal, a leagtar réise. Maidir leis an div, ní mór dúinn a shocrú ar an dath cló dearg, d'p - buí, don réimse - pink. I CSS tipiciúil mbeadh sé a dhéanamh mar seo a leanas:

div {

Dath: dearg;

}

p div {

Dath: buí;

}

réise div p {

Dath: bándearg;

}

Le CSS réamhphróiseálaí thiocfaidh chun bheith go léir níos éasca agus níos dlúithe:

div {

Dath: dearg;

p {

Dath: buí;

.span {

Dath: bándearg;

}

}

}

Eilimintí literally "infheistiú" chéile.

treoracha réamhphróiseálaí

Ag baint úsáide as treoracha @import féidir comhaid allmhairiú. Mar shampla, ní mór dúinn comhad fonts.sass a dhearbhaíonn na stíleanna do chlónna. é a nascadh leis an style.sass comhad is mó: @import 'clónna'. Arna! In ionad an comhad mór amháin leis na stíleanna mór dúinn roinnt gur féidir a úsáid le haghaidh rochtana tapa agus éasca na hairíonna de dhíth.

hagfish

Ceann de na smaointe is suimiúla. Ceadaíonn sé líne amháin a iarraidh ar sraith de mhaoin. Oibriú mar seo a leanas:

@mixin largeFont {

font-teaghlaigh: "Times New Roman ';

font-size: 64px;

líne-airde: 80px;

font-mheáchan: trom;

}

Hagfish a iarraidh ar an eilimint ar an leathanach, bain úsáid as an @include treoir. Mar shampla, ba mhaith linn a chur i bhfeidhm leis an header h1. Tá an struchtúr seo a leanas: H1 {@include: largeFont; }

Gach na hairíonna de hagfish sanntar gné H1.

réamhphróiseálaí Lúide

Meabhraíonn Comhréir Sass cláir. Má tá tú ag lorg rogha go bhfuil níos oiriúnaí do thosaitheoirí ag déanamh staidéir ar CSS, breathnú ar Lúide. Cruthaíodh é i 2009. An ghné is mó - tacaíocht a thabhairt do error CSS dúchais, agus mar sin cur amach acu Imposer cláir beidh sé níos éasca a fhoghlaim.

Na hathróga a dhearbhú ag úsáid an tsiombail @. Mar shampla: @fontSize: 14px;. oibreacha Neadú ar na prionsabail chéanna atá leis in Sass. Hagfish Fógraítear mar seo a leanas: .largeFont () {font-teaghlaigh: "Times New Roman '; font-size: 64px; líne-airde: 80px; font-mheáchan: trom; }. Chun ceangal nach bhfuil sé riachtanach a bhaint as treoracha réamhphróiseálaí - ach cuir an hagfish nuachruthaithe in airíonna na dúile a roghnaíodh. Mar shampla: h1 {.largeFont; }.

stylus

réamhphróiseálaí eile. Cruthaithe i 2011 ag an údar céanna, gur thug an domhan an Jade, Express agus táirgí úsáideacha eile.

Is féidir le Athróga a dhearbhú in dhá bhealach - go sainráite nó go hintuigthe. Mar shampla: font = 'Times New Roman'; - rogha intuigthe. Ach $ font = 'Times New Roman' - soiléir. Hagfish a dhearbhú agus hintuigthe nasctha. Is é an error seo a leanas: redColor () dearg dath. Anois is féidir linn a chur ar an mír, mar shampla: redColor H1 ().

Stylus ar an gcéad amharc d'fhéadfadh sé cosúil dothuigthe. Sa chás go bhfuil an "dúchais" lúibíní agus leathstadanna? Ach tá sé riachtanach chun plunge isteach é, thiocfaidh chun bheith ar fad i bhfad níos soiléire. Cuimhnigh, áfach, gur féidir le forbairt fhadtéarmach an réamhphróiseálaí "wean" úsáideann tú an CSS error clasaiceach. Cúiseanna sé seo uaireanta fadhbanna nuair a bhfuil a bheith ag obair le stíl "íon".

Cén réamhphróiseálaí roghnú?

Go deimhin, tá sé ... nach ndéanann sé ábhar. Thairiscint Gach leaganacha faoi na gnéithe céanna ach tá an error de gach éagsúla. Molaimid dul ar aghaidh mar seo a leanas:

• má tá tú - Ríomhchláraitheoir agus ba mhaith liom a bheith ag obair le stíleanna araon i cód, bain úsáid as an Sass;
• má tá tú - a coder agus ba mhaith liom a bheith ag obair le stíleanna mar atá leis an leagan traidisiúnta, aird a thabhairt ar Lúide;
• más mian leat minimalism, bain úsáid as an Stylus.

I gcás gach leaganacha de líon endless de leabharlanna suimiúil is féidir a shimpliú níos faide a fhorbairt. Úsáideoirí Sass molta aird a thabhairt ar an Compass - uirlis chumhachtach le go leor gnéithe a tógadh i. Mar shampla, tar éis a shuiteáil tú é ní bheidh ort a imní faoi an leagan díoltóir réimír. Shimpliú obair le greillí. Tá uirlisí le haghaidh obair le bláthanna, sprites. Tá réimse a fógraíodh cheana féin hagfish. Tabhair an uirlis cúpla lá - dá bhrí sin beidh tú a shábháil leor am agus an iarracht sa todhchaí.