Share
Nu je de basis onder je riem hebt, zal ik in deze tweede tutorial over Neat mixins een beetje dieper duiken, een aantal andere mixins verkennen en een functie introduceren.
We gaan kijken naar het volgende:
In de afgelopen paar jaar is het belang van flexibele ontwerpen die reageren op het zich steeds verder ontwikkelende landschap van schermafmetingen en apparaten, vrij duidelijk gemaakt. In die zin heeft Bourbon Neat uw rug en biedt u een elegante aanpak om mediaquery's voor uw grids te beheren. Door het gebruik van slimme gerichte mediaquery's, kan uw lay-out worden aangepast aan een breed scala aan apparaten zonder er een puinhoop van te maken. Responsive design is hier om te blijven en een verantwoordelijk en duurzaam gebruik van mediaquery's is koning.
Iets dat je kunt vermijden, is wat je zou kunnen noemen vraag spaghetti-een wirwar van mediaquery's die snel lastig te onderhouden worden. Het beheersbaar houden van mediaquery's is van cruciaal belang. Deze mix is geen perfect tegengif, maar het bevordert zeker een DROGE benadering van het op een verstandige manier omgaan met mediaquery's, vooral wanneer deze gepaard gaat met de new-breekpunt functie. Hoe, ik hoor je vragen?
U kunt mediaqueryblokken schrijven die rastercontexten kunnen nemen. Stel dat u twee elementen hebt die maximaal twaalf kolommen bevatten, zoals gedefinieerd in $ Total-kolommen in jouw _grid-settings het dossier. Deze elementen beslaan respectievelijk 3 en 9 kolommen op schermen met bureaubladafmetingen, die 1088px brede buitenste containers mogelijk maken. Voor kleinere apparaten of viewportmaten, moet u het toestaan media [query] mixin weet op welke grootte de context van 12 kolommen moet worden gewijzigd in een ander getal en past de grootte van de responsieve elementen binnen die nieuwe context dienovereenkomstig aan. Boom!
Haml:
html .container% opzij 3 col / 1 col% artikel 9 col / 2 col
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
opzij, artikel opvulling: 10px marge-bodem: 20px hoogte: 100px
opzij + span-kolommen (3) achtergrondkleur: # 81d4fa + media (max. breedte 700px, 4) + span-kolommen (1)
article + span-columns (9) achtergrondkleur: # e64a19 + media (max. breedte 700px, 4) + span-kolommen (2) "
Hier heb ik de media mixen met een media-functie via max. breedte 700 px en een nieuwe rastercontext van 4 kolommen voor de $ Total-kolommen Maximale wijdte van het element. Een nieuwe rastercontext hebben vastgesteld voor zowel de terzijde en artikel elementen voor de viewport-grootte van 700px max. Ik hoefde alleen de elementen te vertellen hoeveel kolommen ze nu kunnen overspannen binnen het nieuwe totaal van 4 kolommen. Persoonlijk vind ik dat dit behoorlijk raadzaam en gemakkelijk te organiseren is. Het wordt zelfs nog cooler als je het opnieuw gebruikt media contexten (media-query / rastercontext) via de new-breekpunt functie en sla ze op in een Sass-variabele.
Notitie: Als u deze mixin alleen een pixelwaarde geeft, zonder specifieke media-functie:
Sass:
css .gevoelig-responsief element + span-kolommen (8) + media (700px) + span-kolommen (4)
dan zal Neat gebruiken $ Default-functie welke is min-width. Ook is het leveren van een rastercontext optioneel en standaard naar wat is ingesteld $ Total-kolommen in uw _grid-settings gedeeltelijk.
Je vraagt je waarschijnlijk af wat de DRY-aanpak is die ik eerder al noemde, toch? Dat is de juiste mentaliteit!
Deze handige aangepaste Sass-functie is de Robin voor jou media Batman, waardoor je niet steeds opnieuw kunt herhalen. Als u uw mediaquery's veel leesbaarder en herbruikbaarder wilt maken, zie ik geen goede reden waarom u deze sidekick niet zou gebruiken om misdaden tegen mediaquery's te bestrijden.
Genoeg van de Batman-analogie. Simpel gezegd, al deze functie doet het opslaan van mediacontexten (mediaquery / rastercontext) door middel van variabelen en geeft je de mogelijkheid om ze opnieuw te gebruiken in al je media mixins. Dat is een handige extractie! Laten we kijken.
Sass:
"css $ tablet: nieuw breekpunt (min. breedte 768 px max. breedte 1024 px 4)
.some-responsive-element + span-columns (3) + media ($ tablet) + span-kolommen (1)
.some-other-responsive-element + span-columns (9) + media ($ tablet) + span-kolommen (2) "
Super leesbaar! Om extra zeker te zijn, staan we op dezelfde pagina: hier biedt u alle mediafuncties die u nodig hebt (maar geen komma's, dubbele punten), of, en) plus het aantal kolommen voor de nieuwe rastercontext en sla het op in een Sass-variabele. Het enige dat u hoeft te doen, is u voeden media mixins met de juiste variabele, en DROOG ze zijn.
Ik hoop dat je zult waarderen hoe schoon dit is en hoe gemakkelijk het is om je lay-outs voor verschillende breekpunten aan te passen, allemaal op één centrale plaats. Voorbij zijn de dagen waarop het beheren van tonnen van lay-out gerelateerde mediaquery's je snel in een fantasie vuist gevecht met je vroegere zelf zou kunnen krijgen.
Ik zou wat extra tijd willen nemen om deze te verkennen. Als u niet vaak tabellen gebruikt in uw ontwerpen (zoals u waarschijnlijk niet zou doen sinds we de dagen dat u tabellen voor lay-outdoeleinden hebt gebruikt, tot ziens hebben gezoend), kan dit lastig zijn om meteen naar binnen te springen.
Je hebt twee hoofdopties voor het gebruik van deze mixin: met het argument tafel of zonder elk argument.
Sass:
css .sommige rij-element + rij
Tijdens gebruik rij zonder de tafel argument, a Clearfix is toegevoegd en $ vertoning blijft ingesteld op standaard, wat is blok. In feite betekent dat dat wat er na het aangewezen element komt met rij moet zijn eigen ding beginnen op een aparte "rij".
Sass:
css .sommige-tabel-rij-element + rij (tabel)
Aan de andere kant, met behulp van rij (tabel), je raadt het al, maakt deze rij onderdeel van een tabellay-out. Wat er onder de motorkap gebeurt, is onder meer dat deze mix in gaat weergave: tafel en tabelopmaak: vast.
Er is nog een optie die u deze mixin kunt geven. Je kunt een argument doorgeven ($ richting met LTR of RTL) die de richting van uw lay-out voor die specifieke rij verandert.
Sass:
css .some-rij-element + rij ($ richting: RTL)
Maar laten we bij het begin beginnen. Het volgende voorbeeld van een dummy heeft 16 .rij container die de rij mixin. Laten we eens kijken wat er gebeurt als je van de tafel argument.
Haml:
"html .container
.rij% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Sass:
"css .container + outer-container achtergrondkleur: # f5f5f5
.rij + rij
img + span-kolommen (1) hoogte: 60px marge-onderkant: 5 px achtergrondkleur: # e64a19 "
Zoals je ziet, behandelt de browser de eerste vier .rij containers zijn niet gebonden aan een bepaalde rij en dobberen gewoon naar beneden zolang ze over voldoende ruimte beschikken.
Twee .rij containers resulteren in dezelfde truc, op elkaar gestapeld.
Haml:
"html .container
.rij% img% img% img% img
.rij% img% img% img% img
% img% img% img% img
% img% img% img% img "
Niet zo lastig denk ik. Hoewel ik niet zeker weet hoe nuttig dit zou zijn, omdat ik instinctief liever de omega mixin voor een dergelijke gelegenheid. Wat echter behoorlijk nutteloos lijkt, is het gebruik ervan rij (tabel) hier. Je krijgt gewoon een hele lange kolom die alle 16 elementen boven elkaar plaatst. Ik zal je het vervelende screenshot besparen, maar bekijk het codepen voorbeeld als je nieuwsgierig bent.
Tot nu toe heb ik je de basismechanica van deze mix laten zien, vooral als je nog niet bekend bent met het spel. Nu naderen we een bruikbaar territorium. Laten we spelen met een echte tafel.
Als je nog niet eerder voor de gek bent gehouden met tabellen, raad ik je aan eerst Google te activeren voordat je doorgaat. Hieronder is een kleine overlevingsgids voor degenen die een aantal termen moeten vernieuwen.
Hier hebben we een tafel element. Het bestaat uit een thead tag, die één rij heeft om de verschillende kolomkoppen weer te geven via de th -tags. Hieronder vind je de tbody waarin de werkelijke gegevens voor elke tabelrij zijn ondergebracht (tr) via de td labels.
Haml:
"html .container
%tafel
% thead% tr% th Gebruikersnaam% th User_ID% th Favoriete pizza% th Pet% th Naam van het huisdier% th Favoriete game% tbody% tr% td Joe% td 112233% td Pepperoni% td Cat% td Gordon% td Splintercel% tr % td Jane% td 223311% td Paddestoelen% td Hond% td Pluizig% td Metal Gear Solid V% tr% td Bob% td 331122% td Uien% td Vis% td Sharky% td Little Big Planet 2 "
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container achtergrondkleur: donkerder (# f5f5f5, 50%)
tr + row () text-align: center
th padding: top: 10px bottom: 20px
td height: 50px background: # 81d4fa padding-top: 2px "Dit resulteert in een oneven, vervelende tabel blob, die alleen overloopt tot de inhoud in deze tabel datacellen. Uiteraard niet super handig en lastig als je handmatig wilt repareer dit met behulp van een reeks CSS-regels om de zaken op te ruimen.
Er zou een eenvoudige oplossing voor dit recht moeten zijn? Het toevoegen tafel als een argument en weergave: tafel en tabelopmaak: vast kom te hulp! Om nog maar te zwijgen van een beetje topping fill-ouder onder de motorkap.
Sass:
css tr + rij (tabel) text-align: center
Notitie: Een dergelijke vaste tafellay-out heeft als voordeel dat de tabel niet alleen sneller wordt opgemaakt, maar dat de breedte van de kolommen niet afhankelijk is van de inhoud van de tabelcellen. U krijgt gelijkmatig opgestelde rijen die de breedte van de tafelcontainer omspannen. Verwijder een tabelgegevenscel (td) en je ziet dat de andere elementen de ruimte in die rij gelijkmatig verdelen:
Laten we afsluiten met een voorbeeld dat het standaardgedrag van tabellen weergeeft zonder de ... gebruiken rij mixin helemaal.
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container achtergrondkleur: donkerder (# f5f5f5, 50%)
tr text-align: centreren
th padding: top: 10px bottom: 20px
td hoogte: 50px achtergrond: # 81d4fa padding-top: 2px "
Zoals je kunt zien, zijn de cellen gelijk verdeeld, maar gebruiken ze niet alle toegeëigende ruimte die voor hen beschikbaar is. Ze oriënteren zich naar de langste inhoud per kolom en passen hun cellen aan om zich op deze lijnen te richten.
Excuses voor overdreven uitgebreide informatie over rij maar ik hoop dat deze sectie je eventuele hoofdpijn met tafels en rijen een beetje minder pijnloos heeft gemaakt.
Verderop biedt Neat een eenvoudige oplossing als u wilt dat een element snel het bovenliggende element opvult door hetzelfde aantal kolommen te verdelen. U hoeft geen argumenten te geven. Deze mix is niets bijzonders, maar kan van pas komen als je mediaquery's of -tabellen verwerkt.
Notitie: Gebruik makend van overspanning kolommen (12) in plaats van fill-ouder om de hele breedte van een buitencontainer te overbruggen zou niet de juiste aanpak zijn - het zou gewoon onnodige bagage toevoegen.
Haml:
html .container% terzijde Naast 3 kolommen | fill-parent% article Artikel 5 kolommen | fill-ouder
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container marge bovenkant: 10 px achtergrondkleur: # f5f5f5
opzij, artikel marge-bodem: 5px hoogte: 200 px
opzij + span-kolommen (3) + opvul-ouder achtergrondkleur: # 81d4fa
article + span-columns (5) + fill-parent background-color: # e64a19 "
Houd er rekening mee dat elementen gebruiken fill-ouder negeer andere elementen in dezelfde rij en probeer de volledige breedte van de bovenliggende lijn te overbruggen zonder rekening te houden met hun buren. Ik neem aan dat deze een voor de hand liggende is, laten we doorgaan!
Elk element in je Net-rooster heeft een $ Default-layout-richting die is ingesteld op LTR (van links naar rechts) in Instellingen / _grid.scss. Dit betekent dat achter de schermen Neat altijd een richtingsgevoelige context met van links naar rechts.
Onder de motorkap doet deze mixin niets anders dan de vlotterrichting van het toegepaste element wijzigen. Wat is netjes is dat in een bepaalde context, laten we zeggen van links naar rechts, je kunt een hoop rasterelementen verzamelen en hun richting veranderen naar rechts naar links-ineens, onder één codeblok. Nogmaals, deze oplossing maakt de dingen compacter en leesbaarder voor jezelf, maar ook gemakkelijker te begrijpen voor iemand die niet zo bekend is met een bepaald project.
Haml:
html .container% opzij 3 kolommen% artikel 9 kolommen
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container marge bovenkant: 10 px achtergrondkleur: # f5f5f5
opzij, artikel marge-bodem: 5px hoogte: 200 px
+richting-context (rechts-naar-links) opzij + span-kolommen (3) achtergrondkleur: # 81d4fa
article + span-columns (9) achtergrondkleur: # e64a19 "
Hier is diezelfde demo zonder richtingsgevoelige context:
Hier is nog een voorbeeld. Niets nieuws voor nu, het is alleen dat de kolommen even groot zijn en ook uitkomen rechts naar links.
Haml:
html .container% opzij 3 kolommen% artikel 3 kolommen
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container marge bovenkant: 10 px achtergrondkleur: # f5f5f5
opzij, artikel marge-bodem: 5px hoogte: 200 px
+richting-context (rechts-naar-links) opzij + span-kolommen (3) achtergrondkleur: # 81d4fa
article + span-columns (3) achtergrondkleur: # e64a19 "
De volgende kleine aanpassing heeft slechts één van deze drie kolomelementen de mixin gebruiken en daarom zweven ze naar tegenoverliggende zijden van de container. Niets te magisch, maar dit kan handig zijn om in je tas met trucs te hebben.
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + buitenste container marge bovenkant: 10 px achtergrondkleur: # f5f5f5
opzij, artikel marge-bodem: 5px hoogte: 200 px
opzij + span-kolommen (3) achtergrondkleur: # 81d4fa
+richting-context (rechts-naar-links) artikel + span-kolommen (3) achtergrondkleur: # e64a19 "
Dit laatste deel van de tutorial behandelt een aantal mixins die ik omwille van de volledigheid wilde noemen, maar die ik persoonlijk probeer te vermijden omdat ze me niet altijd de resultaten hebben gegeven die ik verwachtte. Als je een betere ervaring hebt om ze te gebruiken, laat het me dan weten. Daarnaast zijn er drie binnenkort verouderd:
Accentsconagua
reset-schermreset-layout-richtingalles resettenOver deze is niet veel te zeggen. Stel je voor dat je de lay-outrichting om wat voor reden dan ook hebt gewijzigd en wilt overschakelen naar de $ Default-layout-richting (van links naar rechts)? Hier gaat u, de standaardcontext wordt hersteld! Geen argument nodig.
Sass:
"css .row + row ($ direction: RTL)
.row reset-layout-direction "
Wanneer kan dit nuttig zijn? Goede vraag! De documentatie zegt meestal wanneer je van richting moet veranderen in een enkele rij. Persoonlijk zou ik niet te veel moeite doen. Allereerst is het gepland om te worden afgeschaft ten gunste van een richting mixin, en het gaf me ook een verrassende hoofdpijn toen ik het wilde laten werken met mediaquery's.
Voor het maken van een codeblok dat de weergave-eigenschappen wijzigt die door mixins in zichzelf worden gebruikt, hebt u twee opties die u aan deze mixin kunt doorgeven: blok en tafel. De eerste is duidelijk en tafel voegt weergave: tafel-cel voor jou. table-cell dwingt een element om zich als een te gedragen td element.
Sass:
css + weergave-context (tabel). enkele-cel + bereik-kolommen (2)
Laten we zeggen dat je de actieve weergave hebt gewijzigd in tafel zoals in het bovenstaande voorbeeld, reset-scherm helpt u eenvoudig terug te schakelen naar blok. Er is ook geen argument voor nodig. De documentatie zegt dat dit het nuttigst is als het wordt toegepast op enkele rijen die hun weergave-waarden hebben gewijzigd.
Sass:
"css .row + row (tabel)
.rij + reset-display "
Als je wilt combineren reset-scherm en reset-layout-richting in één keer, daar krijg je mee te maken alles resetten-geen argumenten vereist. Laten we zeggen dat je op een bepaalde rij het display hebt gewijzigd in tafel en de $ Default-layout-richting naar RTL en wil terug schakelen.
Sass:
"css .row + row (tabel, RTL)
.row + reset-all "
Nou, dat was een lange tijd. Bedankt voor het doorkomen, en ik hoop dat je het een interessante reis vond naar Neat mixin territory. Er is nog een ding om te bespreken; namelijk alle variabelen die u tot uw beschikking hebt om het kader voor uw behoeften aan te passen. De volgende zelfstudie is korter, maar omvat onze verslaggeving over Neat. Zie je daar!
