Preprocessor CSS:-shealladh, taghadh, iarrtas

Dearbh-uile eòlach lìn dealbhachaidh a 'cleachdadh an preprocessor. Chan eil ach a-mhàin. Ma tha thu airson soirbheachadh ann an gnìomhachd seo, na dìochuimhnich mu na prògraman sin. Aig a 'chiad sealladh, dh'fhaodadh iad a dh'adhbhraicheas Ùr-ionnsaiche sàmhach uamhann - tha e ro choltach ris an phrògraman! Gu dearbh, faodaidh sibh a 'dèiligeadh leis na feartan CSS preprocessor airson mu dheidhinn an latha, agus, ma tha thu' feuchainn, an sin mu dhà uair a thìde. San àm ri teachd, bidh iad gu mòr a dhèanamh nas sìmplidhe do bheatha.

Ciamar a bha CSS preprocessor

Gus tuigsinn nas fheàrr na feartan an teicneolas seo, greiseag dean às do eachdraidh an taisbeanadh lèirsinneach de duilleagan-lìn.

Nuair dìreach air tòiseachadh mòr a 'cleachdadh an eadar-lìon, chan eil duilleagan stoidhle idir. Bàs de sgrìobhainnean air an crochadh gu tur air na brabhsair. Gach fear dhiubh a bha nan dòighean fhèin, a tha air a bhith air a chleachdadh airson leigheas sònraichte tags. Mar sin, coimhead air na duilleagan eadar-dhealaichte a rèir dè an t-òrdugh anns a bheil am brabhsair a tha thu a 'fosgladh dhaibh. Tha an toradh - ùpraid, breisleach, duilgheadasan do luchd-leasachaidh.

Ann an 1994, Norwegian saidheans Håcon Lie a leasachadh stoidhle duilleag a dh'fhaodadh a bhith air a chleachdadh airson coltas na duilleagan fa leth bho na HTML-sgrìobhainn. Tha am beachd priglanulas buill de W3C, a cur a-mach anns a 'bhad gu crìch. Bha beagan bhliadhnaichean an dèidh sin dh'fhoillsich e a 'chiad dreach de na CSS sònrachadh. An uair sin, bha i daonnan a 'leasachadh, a' cur crìoch air ... Ach a 'bhun-bheachd' fhan a h-uile h-aon: gach stoidhle àraidh a shuidheachadh lotaichean.

A 'cleachdadh CSS bùird riamh air a bhith na dhuilgheadas. Mar eisimpleir,-lìn dealbhaidh tric Bha duilgheadasan le Seòrsachadh is feartan a 'bhuidhneachaidh b, agus oighreachd nach eil cho sìmplidh.

Agus an uair sin thàinig an dà mìle. Comharraidhean a tha a 'sìor fhàs a thòisich a dhol an sàs ann an proifeiseanta aghaidh deireadh-leasachaidh, a tha cudromach gus a bhith sùbailte agus fiùghantach obair stoidhlichean. Ann aig an àm dh'iarr CSS Ro-leasachain greis gnìomhachais agus a 'tracadh taic ùr comasan nan brabhsair. An uair sin, le JavaScript, agus Ruby eòlaichean fhuair sìos gu gnothachais, a 'cruthachadh preprocessor - structair airson CSS, tha feartan ùra a chur ris.

CSS airson Luchd-tòiseachaidh: preprocessor feartan

Tha iad air grunn ghnìomhan:

• unify brabhsair Ro-leasachain is uaine;

• a dhèanamh nas sìmplidhe sheantansan;

• a 'toirt an cothrom a bhith ag obair le neadaichte-taghaidh gun mhearachdan;

• loidsig stoidhle a leasachadh.

Ann goirid: a 'cur preprocessor CSS phrògraman loidsig comasan. A-nis, stoidhle chan eil e a 'cluich ann àbhaisteach liosta de stoidhlichean agus le beagan air dòighean sìmplidh agus dòighean-obrach: caochladairean, gnìomhan, hagfish, chuairtean h. Cuideachd, tha an comas a bhith a 'cleachdadh matamataig.

'Faicinn a' còrdadh sin tuilleadan-ins, W3C air tòiseachadh a 'mean air mhean Cuir an comas iad ann an CSS còd. Mar eisimpleir, ann an sònrachadh mar sin calc () ghnìomh, a tha le taic bho mòran de bhrobhsairean. Thathar an dùil gun a dh'aithghearr bidh e comasach a chur caochladairean agus a 'cruthachadh hagfish. Ach, bidh seo a 'tachairt anns a' fhaide air falbh san àm ri teachd, agus mar-thà preprocessors seo agus mu-thràth ag obair gu math.

Popular preprocessors CSS. Sass

Dealbhaichte ann an 2007. An toiseach co-phàirt a Haml - teamplaid HTML. Feartan ùra airson smachd a chumail air CSS eileamaidean relished leasachaidh air an Ruby air Rails, a thòisich e a 'sgaoileadh air feadh an àite. SASS àireamh mhòr de na feartan a tha a-nis a 'gabhail a-steach ann an sam bith preprocessor: caochladairean, a' daingneachadh nan taghaidh, hagfish (an uair sin, ge-tà, tha na h-argamaidean nach urrainn a bhith air a chur ris).

Nochdadh ann caochladairean Sass

Caochladairean a ghairm leis an $ soidhne. Faodaidh iad a 'cumail suas nan togalaichean agus seataichean, mar eisimpleir: "$ borderSolid: 1px cruaidh ruadh;". Anns an eisimpleir seo, tha sinn a dh'ainmich caochlaideach ris an canar borderSolid agus shàbhail e a 'cur luach 1px cruaidh dearg. A-nis, ma tha ann an CSS feumaidh sinn a chruthachadh dearg crìoch leud 1px, dìreach a 'sealltainn gun caochlaideach an dèidh an seilbh ainm. An dèidh an naidheachd mu na caochladairean nach urrainn a bhith air atharrachadh. Tha grunn a thogail ann an gnìomhan. Mar eisimpleir, com caochladair le luach $ redcolor # FF5050. A-nis, anns na CSS code ann an feartan sam bith eileamaid, tha e a 'cleachdadh a chur an cruth-clò dath: p {dath: $ redColor; }. A bheil thu airson fheuchainn le dath? Cleachd gnìomh dorcha no eutromaich. Tha seo air a dhèanamh mar: p {dath: dorcha ($ redColor, 20%); }. Mar thoradh, an dath redColor bi 20% na b 'aotroime.

Tha mòran Sass-thogail ann an gnìomhan. Worth co-dhiù a leughadh dhaibh, ach b 'fheàrr - a bhith ag ionnsachadh.

neadachadh

Roimhe sin, gus leigeil fhaicinn a 'neadachadh air an robh a' cleachdadh fada agus mì-chofhurtail dealbhadh. Smaoinich gu bheil sinn a div, a tha p, agus ann a tha e, ach a chur rèis. Airson a 'div, feumaidh sinn a chur an cruth-clò an dath dearg, airson p - buidhe, airson an spang - pinc. Ann àbhaisteach CSS biodh e air a dhèanamh mar a leanas:

div {

dath: dearg;

}

div p {

color: bhuidhe;

}

div p span {

color: pinc;

}

Le CSS preprocessor h-uile a 'fàs nas fhasa agus nas teinne:

div {

dath: dearg;

p {

color: bhuidhe;

.span {

color: pinc;

}

}

}

Elements litireil "seilbh" a chèile.

preprocessor stiùiridhean

A 'cleachdadh stiùiridhean @import urrainn-steach faidhlichean. Mar eisimpleir, tha sinn a 'fonts.sass faidhle a' cur an cèill na stoidhlichean airson miasan-baistidh. Ga cheangal ri prìomh faidhl style.sass: @import 'clòidean'. A rinn thu! An àite aon mhòr faidhle le stoidhlichean againn beagan a dh'fhaodar a chleachdadh airson luath agus cothrom furasta air na tha a dhìth a dhèanamh.

hagfish

E aon de na beachdan as inntinniche. Tha e a 'leigeil le aon loidhne iarraidh air seata de na lotaichean. Ag obrachadh mar a leanas:

@mixin largeFont {

font-family: "Times New Ròmanach ';

font-size: 64px;

loidhne-àirde: 80px;

font-cuideam: dàna;

}

Hagfish tagradh a chur chun an eileamaid air an duilleig, a 'cleachdadh an stiùiridh @include. Mar eisimpleir, tha sinn ag iarraidh cur a-steach chun a 'H1 header. Feumaidh sinn an structair a leanas: H1 {@include: largeFont; }

All feartan hagfish a shònrachadh H1 an eileamaid.

Nas lugha preprocessor

Syntax Sass a 'cuimhneachadh air prògraman. Ma tha thu a 'coimhead airson roghainn a tha nas freagarrach do luchd-tòiseachaidh CSS ag ionnsachadh, a' coimhead airson nas lugha. Chaidh a chruthachadh ann an 2009. Tha prìomh ghnìomh - taic airson CSS dùthchasach sheantansan, agus mar sin nach eil mi eòlach le prògraman Imposer bidh e nas fhasa a bhith ag ionnsachadh.

Tha na tha caochladairean air a ghairm a 'cleachdadh an @ samhla. Mar eisimpleir: @fontSize: 14px;. Nesting obraichean air an aon phrionnsabalan ann mar Sass. Hagfish gan ainmeachadh mar a leanas: .largeFont () {font-family: "Times New Ròmanach '; font-size: 64px; loidhne-àirde: 80px; font-cuideam: dàna; }. Airson ceangal chan eil e riatanach a 'cleachdadh stiùiridhean preprocessor - dìreach Cuir air ùr chruthachadh ann an hagfish feartan a thaghadh eileamaid. Mar eisimpleir: {.largeFont H1; }.

Stylus

Another preprocessor. A chruthachadh ann an 2011 leis an aon ùghdar, a thug an t-saoghail a 'Jade, Express agus stuthan feumail eile.

Caochladairean Faodar an cèill ann an dà dhòigh - an dàrna cuid gu follaiseach no-dhìreach. Mar eisimpleir: font = "Times New Ròmanach '; - fillte a-staigh an roghainn. Ach $ font = "Times New Ròmanach '- soilleir. Hagfish-dhìreach a tha a ghairm agus co-cheangailte. Tha sheantansan a tha mar a leanas: redColor () dath ruadh. A-nis faodaidh sinn ris an nì, mar eisimpleir: H1 redColor ();.

Stylus air a 'chiad shealladh a tha e coltach neo-chrìochnach. Càite a bheil an "dùthchasach" eadar camagan agus semicolons? Ach tha e riatanach gu tuiteam a-steach, uile a 'fàs nas soilleire. Cuimhnich, ge-tà, gu bheil ùine-fhada seo a leasachadh preprocessor urrainn "tighinn dhen chìch" tha thu a 'cleachdadh an clasaig CSS sheantansan. Uaireannan tha seo ag adhbharachadh thrioblaidean nuair a bhith ag obair le "fior-ghlan" stoidhle.

Dè preprocessor taghadh?

Gu dearbh, tha e ... chan eil e gu diofar. A 'tabhann a h-uile tionndaidhean mu na h-aon fheartan dìreach an sheantansan gach eadar-dhealaichte. Sinn a 'moladh a dhol air adhart mar a leanas:

• ma tha sibh - phrogramaiche, agus ag iarraidh a bhith ag obair le stoidhlichean, an dà chuid ann an còd, a 'cleachdadh an Sass;
• ma tha thu - a Coder agus ag iarraidh a bhith ag obair le stoidhlichean mar leis an cruth àbhaisteach, aire do na Nas lugha;
• ma thogras tu minimalism, a 'cleachdadh an Stylus.

Airson a h-uile Tionndaidhean gun chrìoch àireamh de Leabharlainn inntinneach gun urrainn fiù 's barrachd a dhèanamh nas sìmplidhe leasachadh. Cleachdaichean Sass moladh a phàigheadh aire gu Compass - cumhachdach le iomadh inneal-thogail ann an feartan. Mar eisimpleir, an dèidh dhuibh a stàladh a bhios tu a riamh a bhith a 'gabhail dragh mu dheidhinn an reiceadair dreach ro-leasachan. Simplifies ag obair le bidh cliathan. Tha innealan airson a bhith ag obair le flùraichean, sprites. Tha raon fhoillseachadh mar-thà hagfish. Thoir an acfhainn seo a latha no dhà - mar sin bidh thu a shàbhaladh tòrr ùine is an oidhirp anns an àm ri teachd.