Share
Nu när du har grunderna under ditt bälte, i denna andra handledning om snygga mixiner dyker jag lite djupare ut, utforskar några andra mixins och introducerar en funktion.
Vi ska titta på följande:
Under de senaste åren har vikten av flexibla mönster som svarat på det ständigt utvecklande landskapet med skärmstorlekar och -enheter gjorts ganska tydligt. I den meningen har Bourbon Neat din rygg och ger dig ett elegant tillvägagångssätt för att hantera mediafrågor för dina nät. Genom att använda smarta målmediafrågor kan din layout anpassas till ett brett utbud av enheter utan att göra en röra. Responsiv design är här för att stanna och en ansvarsfull och hållbar användning av mediefrågor är kung.
Något att undvika är vad du kan ringa fråga spaghetti-en besvärlig röra av mediafrågor som snabbt blir knepigt att behålla. Att hålla mediafrågor hanterbara är av avgörande betydelse. Denna mixin är inte en perfekt motgift, men det uppmuntrar definitivt ett torkat tillvägagångssätt för att hantera mediaspecifika frågor, särskilt när de är parade med new-brytpunkt fungera. Hur hör jag dig fråga?
Du kan skriva mediasökningsblock som kan ta gridkontext. Säg att du har två element som lägger till upp till 12 kolumner, som definieras i $ total kolumner inom din _grid-settings fil. Dessa element spänner över 3 respektive 9 kolumner på skärmstorlekar i skrivbordsstorlek, vilket möjliggör 1088px breda yttre behållare. För mindre enheter eller visningsstorlekar, tillåta media [fråga] mixin vet vid vilken storlek sammanhanget med 12 kolumner behöver byta till ett annat nummer och justera storleken för de responsiva elementen inom det nya sammanhanget i enlighet därmed. Bom!
HAML:
html. container% åt sidan 3 col / 1 col% artikel 9 col / 2 col
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållare bakgrundsfärg: # f5f5f5
åt sidan, artikelmatning: 10px marginalbotten: 20px höjd: 100px
åt sidan + spänningskolumner (3) bakgrundsfärg: # 81d4fa + media (maxbredd 700px, 4) + spännkolumner (1)
artikel + spaltkolumner (9) bakgrundsfärg: # e64a19 + media (maxbredd 700px, 4) + spännkolumner (2) "
Här gav jag media mixin med en mediefunktion via max bredd 700px och ett nytt grid kontext av 4 kolumner för $ total kolumner maximal bredd av elementet. Har etablerat ett nytt rutnätverk för både åt sidan och artikel element för viewport storlek på 700px max, jag behövde bara berätta för elementen hur många kolumner de nu kan spänna inom den nya summan av 4 kolumner. Personligen tycker jag att det här är ganska läsbart och lätt att organisera. Det blir ännu kallare när du återanvändar mediekontext (mediefråga / rutnät) via new-brytpunkt funktionen och spara dem till en Sass-variabel.
Notera: Om du ger denna mixin med endast ett pixelvärde, utan någon specifik mediefunktion:
sass:
css .some-responsive element + span-kolumner (8) + media (700px) + span-kolumner (4)
då kommer Neat att använda $ Default-funktion vilket är min-bredd. Det är också frivilligt att tillhandahålla ett rutnät och standardinställningar till vad som är inställt $ total kolumner i din _grid-settings partiell.
Du undrar nog vad som händer med DRY-tillvägagångssättet, jag nämnde ett par stycken tidigare, eller hur? Så ska det låta!
Denna praktiska anpassade Sass-funktion är Robin till din media Batman, som hindrar dig från att upprepa dig själv om och om igen. Om du vill göra dina mediafrågor mycket mer läsliga och återanvändbara ser jag inte en bra anledning till att du inte skulle använda denna sidekick för att bekämpa mediasökningsbrott.
Något av Batman-analogi. Enkelt sagt, hela funktionen är att spara mediakontext (mediefråga / rutnät) genom variabler och ge dig möjlighet att återanvända dem i alla dina media mixins. Det är en hel del av en användbar extraktion! Låt oss ta en titt.
sass:
"css $ tablett: ny brytpunkt (min bredd 768px maxbredd 1024px 4)
.lite responsiva element + spänningskolumner (3) + media ($ tablett) + spänningskolumner (1)
.en del-responsiv-element + spänningskolumner (9) + media ($ tablett) + spaltkolumner (2) "
Superläsbar! För att vara säker på att vi är på samma sida: Här anger du alla mediefunktioner du behöver (men inga kommatecken, kolonner, eller, och) plus antalet kolumner för det nya rutnätet, spara sedan det till en Sass-variabel. Allt som är kvar att göra är att mata din media mixins med lämplig variabel, och DRY är de.
Jag hoppas att du kommer att uppskatta hur rent det här läser och hur enkelt det är att tweak dina layouter för olika brytpunkter, allt på ett centralt ställe. Borta är de dagar då man hanterar massor av layoutrelaterade mediefrågor snabbt kan få dig i en fantasifistkamp med ditt tidigare själv.
Jag skulle vilja ta lite extra tid att utforska den här. Om du inte använder bord mycket ofta i dina mönster (som du förmodligen inte skulle, eftersom vi kysste dagarna med att använda tabeller för layoutändamål hejdå) kan det vara svårt att hoppa in direkt.
Du har två huvudalternativ för att använda denna mixin: med argumentet tabell eller utan något argument.
sass:
css .som-rad-element + rad
När man använder rad utan tabell argument, a clearfix läggs till och $ display Ställer som standard, vilket är blockera. Effektivt betyder det att det som kommer efter det utsedda elementet med rad måste starta sin egen sak på en separat "rad".
sass:
css .some-table-row-element + rad (tabell)
Å andra sidan använder man rad (tabell), du gissade det, gör den här raden till en tabelllayout. Vad som händer under huven är bland annat att detta mixin sätter display: bord och tabell layout: fast.
Det finns ytterligare ett alternativ du kan erbjuda denna mixin med. Du kan skicka ett argument ($ riktning med LTR eller RTL) som ändrar riktningen för din layout för den aktuella raden.
sass:
css .some-row-element + rad ($ riktning: RTL)
Men låt oss börja i början. Följande exempel på dummy har 16 .rad behållare som använder rad blanda i. Låt oss se vad som händer om du lämnar tabell argument.
HAML:
"html. container
.rad% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
sass:
"css .container + yttre container bakgrundsfärg: # f5f5f5
.rad + rad
img + span-kolumner (1) höjd: 60px marginalbotten: 5px bakgrundsfärg: # e64a19 "
Som du kan se behandlar webbläsaren de första fyra .rad behållaren är inte bunden till en viss rad och flyter bara nedåt så länge de har plats till dem.
Två .rad behållare resulterar i samma knep, staplade ovanpå varandra.
HAML:
"html. container
.rad% img% img% img% img
.rad% img% img% img% img
% img% img% img% img
% img% img% img% img "
Inte för knepigt antar jag. Även om jag inte är säker på hur användbar detta skulle vara, för att jag instinktivt skulle använda omega mixin för ett sådant tillfälle. Vad som verkar ganska meningslöst använder dock rad (tabell) här. Du skulle bara få en mycket lång kolumn som staplar alla 16 element över varandra. Jag sparar dig otäck skärmdump, men kolla exemplet codepen om du är nyfiken.
Hittills har jag visat dig den grundläggande mekaniken i denna mixin, speciellt om du är ny i spelet. Nu närmar vi oss användbara territorium. Låt oss spela med ett faktiskt bord.
Om du inte har lurat på bord tidigare rekommenderar jag att du brinner upp Google innan du fortsätter. Nedan är en liten överlevnadsguide för dem som behöver uppdatera ett par villkor.
Här har vi en tabell element. Den omfattar en thead tagg, som har en rad för att visa de olika kolumnrubrikerna via th taggar. Nedan hittar du tbody som innehåller de faktiska uppgifterna för varje tabellrad (tr) via td taggar.
HAML:
"html. container
%tabell
% Thead% Tr% Användarnamn% Användare_ID% Favoritpizza% Th Pet% Th Pet Name% th Favoritspel% tbody% tr% td Joe% td 112233% td Pepperoni% td Katt% td Gordon% td Splinter Cell% tr % td Jane% td 223311% td Svampar% 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 kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållare bakgrundsfärg: mörkare (# f5f5f5, 50%)
tr + rad () text-align: center
paddling: topp: 10px botten: 20px
td höjd: 50px bakgrund: # 81d4fa padding-top: 2px "Detta resulterar i en ojämn, otäck tabellblock, som bara sträcker sig så långt som innehållet i dessa tabelldataceller. Det är uppenbarligen inte super användbart och en smärta om du vill manuellt fixa det här med en massa CSS-regler för att städa upp saker.
Det borde finnas en enkel lösning på den här rätten? tillsats tabell som ett argument och display: bord och tabell layout: fast kom till undsättning! För att inte nämna en liten toppning av fyll-förälder under huven.
sass:
css tr + rad (tabell) text-align: center
Notera: En fast tabell layout så här har fördelen att inte bara lägga ut bordet snabbare, men bredden på kolumnerna är inte beroende av innehållet i tabellcellerna. Du får jämnt upplagda rader som sträcker sig över bordets bredd. Ta bort en tabelldatacell (td) och du ser att de andra elementen delar upp utrymmet i den raden jämnt:
Låt oss stänga med ett exempel som visar tabellen som standardbeteende utan använda rad mixin alls.
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållare bakgrundsfärg: mörkare (# f5f5f5, 50%)
tr text-align: center
paddling: topp: 10px botten: 20px
td höjd: 50px bakgrund: # 81d4fa padding-top: 2px "
Som du kan se är cellerna åtskilda jämnt men använder inte allt tillgängligt utrymme som är tillgängligt för dem. De orienterar sig mot det längsta innehållet per kolumn och anpassar sina celler för att anpassa sig efter dessa linjer.
Ursäkta för att vara alltför omtyckt om rad men jag hoppas att det här avsnittet gjorde några huvudvärk du kan ha med bord och rader lite mindre smärtfri.
Att fortsätta erbjuder Neat en enkel lösning om du vill ha ett element för att snabbt fylla sin förälder genom att spänna samma antal kolumner. Du behöver inte ge några argument. Denna mixin är inget fint, men kan vara till nytta när du hanterar mediafrågor eller tabeller.
Notera: Använder sig av span-kolonner (12) istället för fyll-förälder att spänna över hela behållarens bredd skulle inte vara det rätta tillvägagångssättet - det skulle bara lägga till onödigt bagage.
HAML:
html .container% aside Bortsett från 3 kolumner | fill-parent% artikel Artikel 5 kolumner | fyll-förälder
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållarmarginal-topp: 10px bakgrundsfärg: # f5f5f5
åt sidan, artikel marginal-botten: 5px höjd: 200px
åt sidan + span-kolumner (3) + fyll-förälder bakgrundsfärg: # 81d4fa
artikel + span-kolumner (5) + fyll-förälder bakgrundsfärg: # e64a19 "
Tänk på att element som använder fyll-förälder ignorera andra element i samma rad, och sträva efter att spänna över sin förälders hela bredd utan att överväga sina grannar. Jag antar att den här är enkel, låt oss gå vidare!
Varje element i ditt snygga rutnät har en $ Default-layout-riktning som är inställd på LTR (vänster till höger) i inställningar / _grid.scss. Detta betyder att bakom kulisserna använder Neat alltid a riktning-kontext med vänster till höger.
Under huven gör detta mixin ingenting annat än att ändra det applicerade elementets flytriktning. Vad är snyggt är det inom några riktlinjer, låt oss säga vänster till höger, du kan samla en massa rutnät och ändra deras riktning till höger till vänster-allt på en gång, under ett kodblock. Återigen gör den här lösningen allt mer kompakt och läsbar för dig själv, såväl som lättare att förstå för någon som inte är bekant med ett visst projekt.
HAML:
html .container% åt sidan 3 kolumner% artikel 9 kolumner
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållarmarginal-topp: 10px bakgrundsfärg: # f5f5f5
åt sidan, artikel marginal-botten: 5px höjd: 200px
+riktningskontext (höger till vänster) åt sidan + spänningskolumner (3) bakgrundsfärg: # 81d4fa
artikel + span-kolumner (9) bakgrundsfärg: # e64a19 "
Här är samma demonstration utan riktning-kontext:
Här är ett annat exempel. Inget nytt för nu, det är bara att kolumnerna är lika stora och också flyter från höger till vänster.
HAML:
html. container% åt sidan 3 kolumner% artikel 3 kolumner
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållarmarginal-topp: 10px bakgrundsfärg: # f5f5f5
åt sidan, artikel marginal-botten: 5px höjd: 200px
+riktningskontext (höger till vänster) åt sidan + spänningskolumner (3) bakgrundsfärg: # 81d4fa
artikel + spaltkolumner (3) bakgrundsfärg: # e64a19 "
Följande lilla tweak har bara en av dessa tre kolumnelement använder mixin, och därför flyter de mot motsatta sidor av behållaren. Inget alltför magiskt, men det här kan vara praktiskt att ha i din väska med tricks.
sass:
"css kroppsfärg: vit bakgrundsfärg: vit
.behållare + yttre behållarmarginal-topp: 10px bakgrundsfärg: # f5f5f5
åt sidan, artikel marginal-botten: 5px höjd: 200px
åt sidan + span-kolumner (3) bakgrundsfärg: # 81d4fa
+riktning-kontext (höger till vänster) artikel + spänningskolumner (3) bakgrundsfärg: # e64a19 "
Den här sista delen av handledningen täcker ett par mixins som jag ville nämna för fullständighetens skull, men som jag personligen försöker undvika eftersom de inte alltid har givit mig de resultat jag förväntade mig. Om du har en bättre upplevelse med hjälp av dem, var snäll och låt mig veta. Dessutom kommer tre av dem snart att avlägsnas:
Accentsconagua
reset-displayreset-layout-riktningÅterställ alltDet finns inte mycket att säga om den här. Föreställ dig att du har ändrat layoutriktningen av någon anledning och vill byta tillbaka till $ Default-layout-riktning (vänster till höger)? Här går du, standardtexten återställs! Inget argument behövs.
sass:
"css .row + row ($ direction: RTL)
.rad återställ-layout-riktning "
När kan det vara användbart? Bra fråga! Dokumentationen säger mestadels när du behöver byta riktning i en enda rad. Personligen skulle jag inte bry mig för mycket. Först och främst är det slated att bli avskedat till förmån för a riktning mixin, och det gav mig en överraskande huvudvärk när jag ville få det att fungera med mediafrågor.
För att skapa ett kodblock som ändrar visningsegenskaperna som används av mixins i sig har du två alternativ som du kan skicka till denna mixin: blockera och tabell. Den första är uppenbar och tabell lägger till display: bordcell till dig. tabell-cell tvingar ett element att bete sig som a td element.
sass:
css + display-context (tabell) .som-cell + spänningskolonner (2)
Låt oss säga att du har ändrat den aktiva skärmen till tabell som i exemplet ovan, reset-display hjälper dig att enkelt byta tillbaka till blockera. Det tar inget argument heller. Dokumentationen säger att det är mest användbart om det tillämpas på enstaka rader som har ändrat sina visningsvärden.
sass:
"css .row + row (tabell)
.rad + återställningsvisning "
Om du vill kombinera reset-display och reset-layout-riktning på en gång, det är vad du ska ta med Återställ allt-inga argument krävs Låt oss säga i en rad du ändrade displayen till tabell och den $ Default-layout-riktning till RTL och vill byta tillbaka.
sass:
"css .row + row (tabell, RTL)
.rad + återställ-allt "
Jo, det var en lång en. Tack för att du har gjort det, och jag hoppas att du tyckte att det var en intressant resa till Neat mixin territory. Det finns ännu en sak att diskutera om; nämligen alla variabler som du har till ditt förfogande för att anpassa ramarna för dina behov. Nästa handledning är en kortare, men bryter upp vår täckning av Neat. Vi ses där!
