Share
Nå som du har det grunnleggende under beltet ditt, i denne andre opplæringen om Neat mixins vil jeg dykke litt dypere, utforske noen andre mixins og introdusere en funksjon.
Vi skal se på følgende:
I løpet av de siste årene har betydningen av fleksible design som reagerer på det stadig evolusjonerende landskapet med skjermstørrelser og enheter, blitt gjort ganske klart. I denne forstand har Bourbon Neat ryggen din, og gir deg en elegant tilnærming til å håndtere medieforespørsler for nettene dine. Gjennom bruk av smarte målrettede medieforespørsler kan layoutet tilpasses et bredt spekter av enheter uten å gjøre rot. Responsive design er her for å bli og en ansvarlig og bærekraftig bruk av medieforespørsler er konge.
Noe å unngå er det du kan ringe spørre spaghetti-et tøff rot av medieforespørsler som raskt blir vanskelig å vedlikeholde. Å holde mediespørsmål håndterbare er av avgjørende betydning. Denne blandingen er ikke en perfekt motgift, men det oppfordrer definitivt en tørr tilnærming til å håndtere medieforespørsler sunt - spesielt når det er parret med ny-stoppunkt funksjon. Hvordan hører jeg deg spørre?
Du kan skrive mediequeryblokker som kan ta gridkontekster. Si at du har to elementer som legger opp til 12 kolonner-som definert i $ total-kolonner innenfor din _grid-innstillinger fil. Disse elementene spenner over henholdsvis 3 og 9 kolonner på skjermstørrelsesskjermer, som gir mulighet for 1088px brede ytre beholdere. For mindre enheter eller visningsstørrelser, tillat media [spørring] mixin vet i hvilken størrelse konteksten til 12 kolonner må bytte til et annet tall og justere størrelsen på de responsive elementene i den nye konteksten tilsvarende. boom!
Haml:
html. container% til side 3 col / 1 col% artikkel 9 col / 2 col
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5
til side, artikkelpostering: 10px margin-bunn: 20px høyde: 100px
bortsett fra + span-kolonner (3) bakgrunnsfarge: # 81d4fa + media (maksimal bredde 700px, 4) + spansøyler (1)
artikkel + span-kolonner (9) bakgrunnsfarge: # e64a19 + media (maksimal bredde 700px, 4) + span-kolonner (2) "
Her ga jeg til media mixin med en mediefunksjon via maksimal bredde 700px og en ny grid kontekst av 4 kolonner for $ total-kolonner max bredde av elementet. Etter å ha etablert en ny grid kontekst for begge side og artikkel elementer for visningsstørrelsen på 700 piksler max, jeg trengte bare å fortelle elementene hvor mange kolonner de nå kan spenne innenfor den nye summen av 4 kolonner. Personlig tror jeg dette er ganske darn lesbart og enkelt å organisere. Det blir enda kjøligere når du gjenbruker mediekontekster (media spørring / grid kontekst) via ny-stoppunkt fungere og lagre dem i en Sass-variabel.
Merk: Hvis du gir denne mixin kun en pikselverdi, uten noen spesiell mediefunksjon:
Sass:
css .some-responsive-element + span-kolonner (8) + media (700px) + span-kolonner (4)
så vil Neat bruke $ Default-funksjonen som er en minstebredde. Også, å gi en grid kontekst er valgfritt og standard til hva som er satt gjennom $ total-kolonner i din _grid-innstillinger delvis.
Du lurer sikkert på hva som skjer med DRY-tilnærmingen jeg nevnte et par avsnitt tidligere, ikke sant? Det er ånden!
Denne praktiske tilpassede Sass-funksjonen er Robin til din media Batman, holder deg fra å gjenta deg selv igjen og igjen. Hvis du vil gjøre medieforespørsmålene dine mye mer lesbare og gjenbrukbare, ser jeg ikke en god grunn til at du ikke ville bruke dette sidekicket til å bekjempe mediaforespørsler.
Nok av Batman-analogien. Enkelt sagt, hele denne funksjonen er å lagre mediekontekster (mediesøk / grid-kontekst) gjennom variabler og gi deg muligheten til å gjenbruke dem i alle dine media mixins. Det er en hakke av en nyttig utvinning! La oss ta en titt.
Sass:
"css $ tablett: nytt bruddpunkt (min bredde 768px maksimal bredde 1024px 4)
.lite responsivt element + spenningskolonner (3) + media ($ tablett) + sperrekolonner (1)
.noen-andre-responsive-element + span-kolonner (9) + media ($ tablet) + span-kolonner (2) "
Superlesbar! For å være ekstra sikker på at vi er på samme side: Her gir du alle mediefunksjonene du trenger (men ingen kommaer, kolonner, eller, og) pluss antall kolonner for den nye grid-konteksten, lagre den deretter til en Sass-variabel. Alt som er igjen å gjøre er å mate din media mixins med riktig variabel, og DRY de er.
Jeg håper du vil sette pris på hvor rent dette leser og hvor enkelt det er å finjustere layoutene dine for ulike bruddpunkter, alt på ett sentralt sted. Borte er de dagene hvor man håndterer tonn med layoutrelaterte medieforespørsler, kan raskt få deg i en fantasifestekamp med ditt tidligere selv.
Jeg vil gjerne ta litt ekstra tid til å utforske denne. Hvis du ikke bruker bord svært ofte i designene dine (som du sannsynligvis ikke burde ha siden da vi kysset dagene med å bruke tabeller for layoutformål, farvel), kan dette være vanskelig å hoppe inn med en gang.
Du har to hovedalternativer for bruk av denne mixin: med argumentet bord eller uten noe argument.
Sass:
css.some-row-element + rad
Når du bruker rad uten bord argument, a clearfix er lagt til og $ skjerm forblir satt til standard, som er blokkere. Effektivt betyr det at det som kommer etter at det utpekte elementet bruker rad må starte sin egen ting på en egen "rad".
Sass:
css .some-table-row-element + rad (tabell)
På den annen side bruker rad (tabell), du gjettet det, gjør denne raden en del av et bordoppsett. Hva som skjer under hetten, er blant annet at denne blandingen settes skjerm: bord og bordoppsett: fast.
Det er en ekstra mulighet du kan gi denne mixin med. Du kan passere et argument ($ retning med LTR eller RTL) som endrer retningen til oppsettet for den aktuelle raden.
Sass:
css .some-row-element + rad ($ retning: RTL)
Men la oss starte i begynnelsen. Følgende dummy eksempel har 16 .rad beholder som bruker rad mixin. La oss se hva som skjer hvis du går av bord argument.
Haml:
"html .container
.rad% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Sass:
"css .container + ytre beholder bakgrunnsfarge: # f5f5f5
.rad + rad
img + span-kolonner (1) høyde: 60px margin-bunn: 5px bakgrunnsfarge: # e64a19 "
Som du kan se, behandler nettleseren de første fire .rad Beholderen er ikke bundet til en bestemt rad og flyter bare nedover så lenge de har plass til dem.
To .rad beholdere resulterer i det samme trikset, stablet på toppen av hverandre.
Haml:
"html .container
.rad% img% img% img% img
.rad% img% img% img% img
% img% img% img% img
% img% img% img% img "
Ikke for vanskelig jeg antar. Selv om jeg ikke er sikker på hvor nyttig dette ville være, fordi instinktivt vil jeg heller bruke omega mixin for en slik anledning. Det som virker ganske ubrukelig, bruker imidlertid rad (tabell) her. Du vil bare få en veldig lang kolonne som stabler alle 16 elementene over hverandre. Jeg sparer deg for det ekle skjermbildet, men sjekk ut kodespillet hvis du er nysgjerrig.
Så langt har jeg vist deg de grunnleggende mekanikkene til denne mixin, spesielt hvis du er ny i spillet. Nå nærmer vi oss nyttig territorium. La oss spille med en faktisk tabell.
Hvis du ikke har lurt med tabeller før, anbefaler jeg at du skyter opp Google før du fortsetter. Nedenfor er en liten overlevelsesguide for de som trenger å oppdatere et par vilkår.
Her har vi en bord element. Den består av a thead tag, som har en rad for å vise de forskjellige kolonneoverskriftene via th tags. Under finner du tbody som huser de faktiske dataene for hver tabellrad (tr) via td tags.
Haml:
"html .container
%bord
%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% % td Jane% td 223311% td sopp% td hund% td Fluffy% td Metal Gear Solid V% Tr% td Bob% td 331122% td Løk% td Fisk% td Sharky% td Little Big Planet 2 "
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: mørkere (# f5f5f5, 50%)
tr + rad () tekstjustering: senter
t polstring: topp: 10px bunn: 20px
td høyde: 50px bakgrunn: # 81d4fa padding-top: 2px "Dette resulterer i en ujevn, ekkel tabellblomst, som bare strekker seg så langt som innholdet i disse tabelldataceller. Tydeligvis ikke super nyttig og en smerte hvis du vil manuelt fikse dette ved hjelp av en haug med CSS-regler for å rydde opp ting.
Det bør være en enkel løsning på denne rettigheten? legge bord som et argument og skjerm: bord og bordoppsett: fast kom til redning! For ikke å nevne en liten topping av fylle-foreldre under panseret.
Sass:
css tr + rad (tabell) tekstjustering: senter
Merk: Et fast bordoppsett som dette har fordelen av ikke bare å legge bordet raskere, men bredden på kolonnene er ikke avhengig av innholdet i tabellcellene. Du får jevnt lagt ut rader som strekker seg over bordbeholderens bredde. Fjern en tabelldatakelle (td) og du vil se de andre elementene dele opp plassen i den raden jevnt:
La oss lukke med et eksempel som viser standardoppførelsen til tabeller uten bruker rad mixin i det hele tatt.
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: mørkere (# f5f5f5, 50%)
tr tekstjustering: senter
t polstring: topp: 10px bunn: 20px
td høyde: 50px bakgrunn: # 81d4fa padding-top: 2px "
Som du kan se, er cellene fordelt jevnt, men ikke bruk alle de tildelte plassene som er tilgjengelige for dem. De orienterer seg til det lengste innholdet per kolonne og justerer sine celler for å justere seg langs disse linjene.
Unnskyld for å være altfor forvirret om rad men jeg håper denne delen gjorde noen hodepine du kanskje har med bord og rader litt mindre smertefri.
Fortsett, tilbyr Neat en enkel løsning hvis du vil ha et element for raskt å fylle sin forelder ved å spenne det samme antall kolonner. Du trenger ikke å gi noen argumenter. Denne mixin er ikke noe fancy, men kan være nyttig når du håndterer medieforespørsler eller -tabeller.
Merk: Ved hjelp av span-kolonner (12) i stedet for fylle-foreldre å spenne hele bredden på en ytre beholder ville ikke være den rette tilnærmingen - det ville bare legge til unødvendig bagasje.
Haml:
html .container% side side Til side 3 kolonner | fill-parent% artikkel Artikkel 5 kolonner | fylle-foreldre
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholdermargin-topp: 10px bakgrunnsfarge: # f5f5f5
til side, artikkel margin-bunn: 5px høyde: 200px
bortsett fra + span-kolonner (3) + fill-parent bakgrunnsfarge: # 81d4fa
artikkel + span-kolonner (5) + fill-parent bakgrunnsfarge: # e64a19 "
Husk at elementene bruker fylle-foreldre ignorerer andre elementer i samme rad, og tar sikte på å spenne foreldrenes fullbredde uten å vurdere sine naboer. Jeg antar at denne er rettferdig nok, la oss gå videre!
Hvert element i ditt ryddige rutenett har en $ Default-layout-retning som er satt til LTR (venstre til høyre) i innstillinger / _grid.scss. Dette betyr at bak kulissene Neat alltid bruker en retning-kontekst med venstre til høyre.
Under hetten gjør denne blandingen ingenting annet enn å endre flattretningen til det påførte elementet. Hva er ryddig er det innen noen retningskontekst, la oss si venstre til høyre, du kan samle en haug med gitterelementer og endre retningen til høyre til venstre-alt på en gang, under en kodeblokk. Igjen gjør denne løsningen ting kompaktere og lesbare for deg selv, så vel som lettere å forstå for noen som ikke er kjent med et bestemt prosjekt.
Haml:
html .container% til side 3 kolonner% artikkel 9 kolonner
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholdermargin-topp: 10px bakgrunnsfarge: # f5f5f5
til side, artikkel margin-bunn: 5px høyde: 200px
+retningskontekst (høyre til venstre) til side + span-kolonner (3) bakgrunnsfarge: # 81d4fa
artikkel + span-kolonner (9) bakgrunnsfarge: # e64a19 "
Her er den samme demonstrasjonen uten retning-kontekst:
Her er et annet eksempel. Ingenting nytt for nå, det er bare at kolonnene er like store og også flyter fra høyre til venstre.
Haml:
html. container% til side 3 kolonner% artikkel 3 kolonner
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholdermargin-topp: 10px bakgrunnsfarge: # f5f5f5
til side, artikkel margin-bunn: 5px høyde: 200px
+retningskontekst (høyre til venstre) til side + span-kolonner (3) bakgrunnsfarge: # 81d4fa
artikkel + span-kolonner (3) bakgrunnsfarge: # e64a19 "
Følgende lille tweak har bare en av disse tre kolonneelementene, bruk mixin, og derfor flyter de til motsatte sider av beholderen. Ingenting er for magisk, men dette kan være nyttig å ha i posen med triks.
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholdermargin-topp: 10px bakgrunnsfarge: # f5f5f5
til side, artikkel margin-bunn: 5px høyde: 200px
bortsett fra + span-kolonner (3) bakgrunnsfarge: # 81d4fa
+retning-kontekst (høyre til venstre) artikkel + span-kolonner (3) bakgrunnsfarge: # e64a19 "
Denne siste delen av opplæringen dekker et par mixins jeg ønsket å nevne for fullstendig skyld, men som jeg personlig prøver å unngå siden de ikke alltid har gitt meg de resultatene jeg forventet. Hvis du har en bedre opplevelse med å bruke dem, vennligst gi meg beskjed. Dessuten blir tre av dem snart avskrevet:
Accentsconagua
reset-skjermreset-layout-retningenTilbakestill altDet er ikke mye å si om dette. Tenk deg at du har endret layoutretningen uansett grunn og vil bytte tilbake til $ Default-layout-retning (venstre til høyre)? Her går du, standardkonteksten blir gjenopprettet! Ingen argument nødvendig.
Sass:
"css .row + row ($ retning: RTL)
.rad reset-layout-retning "
Når kan dette være nyttig? Godt spørsmål! Dokumentasjonen sier det meste når du må endre retning i en enkelt rad. Personlig ville jeg ikke bry meg for mye. Først av alt er det slated å bli avskrevet til fordel for a retning mixin, og det ga meg en overraskende hodepine da jeg ønsket å få det til å fungere med medieforespørsler.
For å opprette en kodeblokk som endrer visningsegenskapene som brukes av mixins i seg selv, har du to alternativer du kan sende til denne mixin: blokkere og bord. Den første er åpenbar og bord legger display: tabell-celle for deg. Tabellen-celle- tvinger et element til å oppføre seg som a td element.
Sass:
css + vise-kontekst (tabell) .some-celle + span-kolonner (2)
La oss si at du har endret den aktive skjermen til bord som i eksemplet ovenfor, reset-skjerm hjelper deg enkelt å bytte tilbake til blokkere. Det tar heller ikke noe argument. Dokumentasjonen sier at den er mest nyttig hvis den brukes på enkeltrader som har endret visningsverdiene.
Sass:
"css .row + row (table)
.rad + reset-display "
Hvis du vil kombinere reset-skjerm og reset-layout-retningen på en gang, det er det du får med deg Tilbakestill alt-ingen argumenter kreves. La oss si på en rad du endret skjermen til bord og $ Default-layout-retning til RTL og ønsker å bytte tilbake.
Sass:
"css .row + row (tabell, RTL)
.rad + reset-all "
Vel, det var en lang en. Takk for at du har gjort det, og jeg håper du fant det å være en interessant reise inn i Neat mixin territorium. Det er enda en ting å diskutere om; nemlig alle variablene du har til rådighet for å tilpasse rammen for dine behov. Den neste opplæringen er en kortere, men bryter opp vår dekning av Neat. Ser deg der!
