Ábhar
- An fhadhb
- Susy
- Gabhdáin
- Trasnaíonn
- Réamhshocruithe a chur ar bun
- Colúin Padding
- Bainistiú Ceisteanna Meán
- Breakpoint agus Susy
- Leaganacha Máistreachta le Mixins
Is féidir le leagan amach sofhreagrach a bheith dúshlánach mar gheall ar an matamaitic atá i gceist, mar sin is gnách do dhearthóirí dul chuig creataí agus / nó Sass chun an próiseas a shimpliú. Tá a lán creataí bunaithe ar eangach 12 cholún, ach ní bhíonn suíomh sofhreagrach oiriúnach don struchtúr seo i gcónaí. Taispeánfaidh mé duit anseo conas dhá shíneadh Sass a úsáid chun leagan amach fíor-solúbtha a chruthú a sháraíonn an eangach 12 cholún.
An fhadhb
Is féidir le leagan amach sofhreagrach a dhearadh a bheith diana, mar baineann sé le leithead na gcoimeádán, na sraitheanna, na gcolún agus na ngáitéar a ríomh ag briseadhphointí éagsúla. Is féidir le creataí cabhrú trí réamhshocruithe a chruthú le haghaidh mionphointí. Tugann Bootstrap 3, mar shampla, eangach 12 cholún dúinn le ceithre mhionphointe fiosrúcháin ó na meáin. Ansin úsáideann tú ranganna a fhágann go dtógann d’ábhar líon áirithe spotaí san eangach, agus tógann na gáitéir 30px i gcónaí.
Oibríonn sé seo go hiontach an chuid is mó den am, ach tá dhá fhadhb ann. Ar dtús, má chuirtear na ranganna seo le do mharcáil is féidir focal beag a fháil. Abair go dteastaíonn leagan amach uait a úsáideann na colúin uile ar ghléasanna soghluaiste, sé cinn de na 12 cholún ar ghléasanna beaga, agus ceithre cinn ar ghléasanna meánacha. D’fhéadfadh go mbeadh cuma mar seo ar an marcáil sin:
h2> Services / h2> div> article> img src = "images / icon-exoticpets.svg" alt = "Deilbhín"> h3> Peataí Coimhthíocha / h3> p> Cuirimid cúram speisialaithe ar fáil do reiptílí, creimirí, éin agus eile peataí coimhthíocha./p>
Is í an dara fadhb ná go gcuireann na ranganna seo faisnéis leagan amach le do HTML agus go mbíonn sé deacair do chód a nuashonrú, go háirithe ar shuiteáil mhór. De réir mar a éiríonn do leagan amach níos casta, b’fhéidir go mbeidh cód éigin agat a bhfuil an chuma air mar seo:
div>
Is í an tsaincheist is mó ná nach bhfuil mórán solúbthachta agat. Ba chóir go dtabharfadh do chreat aire don mhatamaitic, toisc gurb é sin an chuid chrua, ach níor cheart go mbeadh sé ag deachtú méadrachtaí do leagan amach. Cé a chuir na creataí seo i do cheann?
Susy
Is é gealltanas simplí Susy ná go mbeidh imní ort faoin dearadh agus í ag tabhairt aire don mhatamaitic. Ag a chroílár tá sraith de mheascáin Sass ann chun leithead a ríomh i gcóras eangaí atá go hiomlán solúbtha.
Tosaigh leis an leabharlann a iompórtáil isteach i do thionscadal trí ordú allmhairiúcháin: @import "susy";. Tugann sé seo rochtain duit ar chreat eangaí Susy, rud nach bhféadfadh a bheith níos simplí a chur i bhfeidhm. San fhoirm is bunúsaí, níl ach dhá mheascán ann a chaithfidh tú a fhoghlaim. Is é an chéad an mixin coimeádán.
Gabhdáin
Cuidíonn coimeádáin leat rialú a dhéanamh ar an gcaoi a n-athraíonn leithead eiliminte le mionphointí éagsúla. Le Susy, is féidir linn na coimeádáin taobh istigh d’aon eilimint a athshainiú ag am ar bith, gan aon ranganna breise a chur lenár gcód HMTL.
Ligean le rá go bhfuil suíomh Gréasáin difriúil á leagan amach agam. Más mian liom coimeádán a chruthú laistigh d’eilimint HTML, is féidir liom cuir san áireamh i mo dhearbhú, mar seo:
#welcome {article {@include container (70%); } // alt}
Fágfaidh sé sin go n-oibreoidh an mhír le haicme rannóige mar choimeádán bootstrap, gan aicme .container a chur isteach inár HTML - rud a chiallaíonn gur féidir lenár HTML a bheith i bhfad níos séimeanaí.
div id = "fáilte"> alt> h1> Fáilte chuig Óstán Landon / h1> p> Leanann an Landon bunaidh ar aghaidh tar éis 50 bliain i gcroílár Iarthar Londain. Tá rud éigin ag gach duine i gcomharsanacht an West End - ó amharclann go bia go radharcanna stairiúla. Agus is áit iontach é an Rooftop Cafe nach gcailltear do thaistealaithe agus do mhuintir na háite dul i mbun deochanna, bia, agus dea-chomhrá./p> / article> / div>
Chomh maith le mo HTML a dhéanamh i bhfad níos inléite, déanann sé seo rudaí níos éasca a nuashonrú. Nuair a bhainimid úsáid as ranganna cosúil le hábhar agus radharc, is furasta athshainiú a dhéanamh ar a bhfuil i gceist leis na heilimintí sin i dtéarmaí leagan amach, in ionad a bheith ag smaoineamh ar an méid ranganna a chaithfimid a chur leis d’fhonn go n-iompróidh ár n-ábhar an bealach a theastaíonn uainn dó .
Trasnaíonn
In Susy cruthaíonn tú sraitheanna agus colúin ag úsáid réisí. Chun gné a chruthú a thógann ceann de thrí cholún, is féidir leat rud mar seo a scríobh.
#usefulinfo {section {@include span (1 de 3); }}
Rud atá iontach faoi seo ná nach gcaithfimid riamh cloí le líon sonrach colún agus na heilimintí a choigeartú dá réir. Ní fhéadfaidh aon ghné de mo leagan amach ach an méid spáis a theastaíonn uaim ag an am sin a thógáil.
Athraíonn sé seo an bealach a smaoiníonn tú ar cholúin i ndáiríre. Dá mbeinn ag úsáid Bootstrap, scríobhfainn an cód thuas mar .col-sm-4 ós rud é gur ceithre thrian de 12 cholún é. Le Susy, ní gá dom smaoineamh ar an líon aonad ba mhaith liom a roinnt; Is féidir liom an méid spáis a theastaíonn uaim a shonrú. Nuair nach bhfuil tú ag smaoineamh a thuilleadh ar an athrú go líon sonrach colún, is féidir leat díriú ar an gcuma ar chóir a bheith ar an leagan amach ina ionad.
Réamhshocruithe a chur ar bun
Ar ndóigh, is maith an rud é mainneachtainí a bheith agat in aon chóras leagan amach, mar sin ní gá dúinn méid ár nguthanna a shonrú i ngach cás. Déanaimid é sin trí athróg ar a dtugtar $ susy ag barr ár Sass a mhodhnú:
$ susy: (colúin: 12, coimeádán: 60em, gáitéir: 1/4, gutter-position: istigh);
Tá tonna mainneachtainí ag Susy is féidir leat a úsáid chun do ghreille réamhshocraithe a chur ar bun, ach tabharfaidh an bunú bunúsach seo aire do réamhshocrú caighdeánach cosúil le Bootstrap a chur le chéile. Ná déan dearmad, tá gach rud in Susy inúsáidte mar sin níor phós tú riamh le ceann ar bith díobh seo, agus is féidir iad a athrú ar bhonn tag-le-clib.
Beidh 12 cholún san eangach réamhshocraithe anois nuair a úsáidfimid an t-ordú @include sa mheascán coimeádán, agus glasálfar an coimeádán sin ar leithead 60em, le gáitéir atá ceathrú de mhéid na gcolún. Dá mbeimis ag iarraidh na codanna roimhe seo a fheistiú ar an eangach seo, d’fhéadfaimis an dearbhú mar seo a scríobh:
#usefulinfo {alt {@include span (4); }}
Ciallaíonn sé seo go dtógann gach cuid ceithre cinn de na 12 cholún. Mar sin féin, sílim go ndéanann sé ciall níos mó a bheith in ann a rá go dtógann eilimint suas le ‘ceann amháin de thrí’ cholún. Más gá duit colúin a fhritháireamh go suíomh áirithe, is féidir leat an nodaireacht seo a úsáid:
réise @include (8 ag 4 de 12);
Ligeann sé seo d’eilimint ocht gcolún a thógáil, ag tosú ag an gceathrú háit i ngreille 12 cholún. Mar sin nuair atá leagan amach á chruthú agat, is féidir leat díriú ar a gcaithfidh d’ábhar a dhéanamh in ionad an chaoi a n-oireann an dearadh don eangach atá agat cheana féin.
Colúin Padding
Bealach eile chun socrúchán do chuid eilimintí a rialú is ea do cholúin a stuáil. Cuireann sé seo roinnt spásanna colún ar gach taobh de do cholúin. Mar shampla, d’fhéadfá colún seacht n-aonad a bhogadh ar dheis agus aonad amháin a chur air ón taobh clé, mar seo:
ceap @include (7,1);
Ciallaíonn sé seo gur féidir leat droim ar ais a dhéanamh agus dearaí a chruthú bunaithe ar an spásáil ar gach taobh d’ábhar, chomh maith le rudaí a leagan amach trí smaoineamh ar spásanna dearfacha (cé mhéad colún ba cheart a thógáil le heilimint).
Bainistiú Ceisteanna Meán
Chun rudaí a dhéanamh fíorfhreagrach, ní mór duit a bheith in ann bunú agus dearadh colún a chomhcheangal le mionphointí freagracha. Chun seo a dhéanamh, is féidir linn tacar eile meascán a úsáid ó leabharlann ar a dtugtar Breakpoint.
Déanann Breakpoint sé níos éasca ceisteanna na meán a láimhseáil i do leagan amach. Déanann sé é sin tríd an teanga a theastaíonn uait a úsáid chun miondealuithe fiosrúcháin na meán a chruthú. Go traidisiúnta, cruthaíonn tú iad seo ag úsáid riail mar seo:
@media (min-width: 34em) agus (uas-leithead: 62em) {.container {...}}
Cruthaíonn sé seo raon leithead ina mbíonn tionchar ag na dearbhuithe ar do leagan amach. Cuimsíonn Breakpoint na glaonna isteach i meascán céadchiall atá i bhfad níos éasca a scríobh:
.container {@include breakpoint (34em 62em) {...}}
Tá an glao difriúil freisin, mar is féidir linn é seo a shannadh go héasca laistigh de rang atá ann cheana. Is é an rud iontach faoi Breakpoint ná go ndéanann sé toimhdí bunaithe ar riachtanais chomhchoiteanna leagan amach.
Is furasta rialacha briste a fhoghlaim freisin. Níl ach trí rud ann a chaithfidh a bheith ar eolas agat:
- Mura gcuireann tú ach uimhir amháin san áireamh sa ghlao ceannphointe, glacfaidh Breakpoint le glao fiosrúcháin meán-leithead
- Má chuireann tú dhá uimhir san áireamh, glacfaidh an ceannphointe gur mhaith leat raon a shonrú idir an dá uimhir (mar a tharla sa sampla roimhe seo)
- Má chuireann tú dhá luach san áireamh agus gur sreang é ceann amháin, glacann leis go bhfuil péire luach gné á sheoladh agat chuig an mixin, mar sin más mian leat is féidir leat treoshuíomh nó aon riail cheist speisialta meán eile a sheoladh isteach fós
Tá Breakpoint fillte i Susy ó leagan 2.2.1. Oibríonn leagan Susy díreach cosúil leis na meascáin Breakpoint, ach in ionad breakpoint a ghlaoch, úsáideann tú susy-breakpoint. Dhéanfaí an glao céanna mar seo:
.container {@include susy-breakpoint (34em 62em) {uas-leithead: 50%; corrlach-chlé: uathoibríoch; corrlach-dheis: uathoibríoch; }}
Breakpoint agus Susy
Nuair a chomhcheanglaíonn tú Breakpoint le Susy faigheann tú greille solúbtha atá in ann dul in oiriúint go héasca do dhearbhuithe éagsúla fiosrúcháin ó na meáin. Breathnaímid ar an HTML don chuid faisnéise ar shuíomh.
div id = "hotelinfo"> alt id = "úsáideachinfo"> roinn id = "teachtainfo"> / roinn> roinn id = "seirbhísí"> / alt> roinn id = "inrochtaineacht"> / roinn> / alt> alt id = "greenprogram"> / article> / div>! - hotelinfo ->
Ag comhcheangal Susy agus Breakpoint, is féidir linn ceisteanna ó na meáin a chruthú ina bhfuil leagan amach greille éagsúil. Tá trí roinn dhifriúla agam i mo leagan amach, ach teastaíonn uaim go mbeadh rialacha difriúla acu ag brath ar leithead an amharcphort.
Ag an dá cheannphointe éagsúla seo, tá iompar an-difriúil ag ár leagan amach. Sa cheannphointe níos mó ar dheis, tógann gach cuid trí cholún. Sa bhunphointe níos lú, tógann an chéad cholún 100 faoin gcéad den amharcphort, ach tógann an dá cholún eile leath den amharcphort. Is é seo a fhágann go bhfuil na meascáin seo chomh cumhachtach. Tá an cód chun an dá leagan amach seo a chur in iúl gonta:
roinn {@include susy-breakpoint (650px) {@include span (1 as 3); } // breakpoint @include susy-breakpoint (450px 650px) {& .checklist {@include span (1 de 2)} // seicliosta} // breakpoint} // section
Ar dtús, chuireamar mainneachtainí ar bun maidir le haon eilimint i gclib rannóige. Má shroicheann na heilimintí sin amharcphort atá níos mó ná 650px, úsáidfidh siad eangach trí aonad, agus glacfaidh gach ceann acu aonad amháin.
Má tá an leagan amach idir 450px agus 650px, luífidh na heilimintí le haicme de liosta seiceála (na rannáin seirbhíse agus inrochtaineachta) isteach i ngreille iomlán nua nach bhfuil ach dhá cholún ann, agus glacfaidh gach eilimint ceann de na haonaid sin.
Tógann an fhaisnéis teachta 100 faoin gcéad den eangach idir an dá cheannphointe seo. Fógra nár shonraigh muid cad a tharlaíonn faoi bhun 450 picteilín. Tugann na mainneachtainí aire dó seo - tógfaidh gach cuid 100 faoin gcéad den amharcphort.
Leaganacha Máistreachta le Mixins
Téann an méid a thugann an dá chreat meascáin seo duit níos faide ná an cód a úsáideann tú chun na leagan amach a chruthú. An cumas do leagan amach a chur in iúl gan a bheith buartha faoin eangach seo nó go n-athraíonn an eangach sin an bealach a oibríonn d’inchinn agus tionscadail á ndearadh.
Ná faigh mé mícheart, is breá liom creataí. Is féidir le bootstrap cabhrú leat leagan amach a chruthú le luas gan fasach. Cuireann sé eangach faoi thástáil cath ar fáil a théann níos faide ná an leagan amach chun gach cineál comhpháirteanna CSS agus JavaScript a sholáthar chun eilimintí coitianta mar tháblaí, mhodúil agus fhoirmeacha a láimhseáil go tapa.
Is é an rud a dhéanann an córas dearaidh atá imlínithe agam ná an teanga a úsáideann tú a athrú chun cur síos a dhéanamh ar leagan amach. Is córas nádúrtha, comhoiriúnach ar gcúl agus éasca le foghlaim é a athróidh an bealach a smaoiníonn tú ar láithreáin ghréasáin a dhearadh.
Focail: Ray Villalobos
Is údar foirne é Ray Villalobos ag Lynda.com a dhéanann sainfheidhmiú ar dhearadh agus ar fhorbairt lán-chairn, dearadh frontend, JS, AngularJS, Sass, Bootstrap. Foilsíodh an t-alt seo ar dtús in eagrán 274 den irisleabhar glan.
Thaitin seo leis? Léigh iad seo!
- 20 céim chuig leagan amach foirfe an láithreáin ghréasáin
- Roghnú teagaisc iontach Wordpress
- Clónna tatú saor in aisce do dhearthóirí
