Share
Acum, că aveți elementele de bază sub centură, în acest al doilea tutorial despre amestecurile Neat, mă voi arunca cu puțin mai mult, explorând alte mixuri și introducând o funcție.
Vom analiza următoarele:
În ultimii ani, importanța proiectelor flexibile, care răspund peisajului mereu în evoluție a dimensiunilor și dispozitivelor, a devenit destul de clar. În acest sens, Bourbon Neat are spatele, oferindu-vă o abordare elegantă pentru a gestiona interogările media pentru grilele dvs. Prin utilizarea interogărilor inteligente orientate inteligent, aspectul dvs. poate fi adaptat la o gamă largă de dispozitive, fără a face probleme. Designul receptiv este aici pentru a rămâne și o utilizare responsabilă și durabilă a interogărilor media este rege.
Ceva de evitat este ceea ce ați putea numi interogarea spaghetelor-o mizerie încurcată de interogări media, care devine repede dificil de menținut. Menținerea gestionabilității interogărilor media este de o importanță crucială. Acest amestec nu este un antidot perfect, dar încurajează în mod definitiv o abordare DRY pentru a face față cu desăvârșire întrebărilor media - mai ales când este asociat cu nou-breakpoint funcţie. Cum, am auzit că te întrebi?
Puteți scrie blocuri de interogări media care pot lua contexte de rețea. Spuneți că aveți două elemente care adaugă până la 12 coloane - așa cum este definit în $ total- coloane în interiorul dvs. _grid-settings fişier. Aceste elemente cuprind 3 și 9 coloane, respectiv pe ecrane de dimensiune de birou, care permit containere exterioare lățime 1088px. Pentru dispozitivele cu dimensiuni mai mici sau dimensiunile ferestrei de vizualizare, permiteți mass-media [interogare] mixin știu la ce mărime contextul din 12 coloane trebuie să se schimbe la un alt număr și să ajusteze dimensiunea pentru elementele receptive în acest context nou în consecință. bum!
Haml:
html .container% deoparte 3 col / 1 col% articol 9 col / 2 col
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
deoparte, umplutura articolului: 10px margin-bottom: înălțime 20px: 100px
(3) culoarea fundalului: # 81d4fa + media (max-lățime 700px, 4) + span-coloane (1)
articol + span-coloane (9) culoarea de fundal: # e64a19 + media (max-lățime 700px, 4) + span-coloane (2)
Aici, i-am oferit mass-media mixin cu o caracteristică media prin max-lățime 700px și un nou context de rețea 4 coloane pentru $ total- coloane lățimea maximă a elementului. După ce a stabilit un nou context de rețea pentru ambele deoparte și articol elemente pentru mărimea ferestrei de vedere 700 de pixeli max, am nevoie doar să spun elementele câte coloane pot acum să se încadreze în noul total de 4 coloane. Personal, cred că este destul de greu de citit și ușor de organizat. Ea devine mai rece odată ce reutilizați media (interogare media / context de rețea) prin nou-breakpoint și salvați-le la o variabilă Sass.
Notă: Dacă oferiți acest amestec doar cu o valoare a pixelilor, fără nicio caracteristică media specifică:
Sass:
css .some-responsive-element + span-coloane (8) + media (700px) + span-coloane (4)
atunci Neat va folosi $ Default-caracteristică care este min lățime. De asemenea, furnizarea unui context de rețea este opțională și implicit la orice este setat $ total- coloane în tine _grid-settings parțial.
Probabil vă întrebați ce se întâmplă cu abordarea DRY pe care am menționat-o câteva paragrafe mai devreme, nu? Asta e spiritul!
Această funcționalitate Sass personalizată este Robin pentru dvs. mass-media Batman, vă împiedică să vă repetați mereu. Dacă doriți ca interogările dvs. media să devină mult mai ușor de citit și reutilizabile, nu văd un motiv bun pentru care nu ați fi folosit acest ajutor pentru a combate crimele de interogare media.
Destul de analogia lui Batman. Puneți pur și simplu, această funcție este salvarea contextelor media (interogarea media / contextul grilei) prin variabile și vă oferă posibilitatea de a le reutiliza în toate mass-media mixins. E o chestie de extragere utilă! Hai să aruncăm o privire.
Sass:
"css $ tabletă: nou-breakpoint (min-lățime 768px max-width 1024px 4)
.(3) + media ($ tabletă) + span-coloane (1)
.(+) + coloane (+) (+) (+)
Super lizibil! Pentru a fi siguri că suntem pe aceeași pagină: aici furnizați toate caracteristicile media de care aveți nevoie (dar nu există virgule, colonii, sau, și) plus numărul de coloane pentru noul context de rețea, apoi salvați-l la o variabilă Sass. Tot ce trebuie să faceți este să vă hrăniți mass-media amestecurile cu variabila adecvata si DRY sunt.
Sper că veți aprecia cât de curat este acest lucru și cât de ușor este să vă ajustați planurile pentru diferite puncte de întrerupere, toate într-un singur loc central. Au dispărut zilele în care gestionarea a numeroase volume de interogări media legate de aspect ar putea să vă aducă rapid într-o luptă cu pumnul fantezist cu dvs..
Aș vrea să-mi dau puțin timp să explorez asta. Dacă nu utilizați tabele foarte des în desenele dvs. (cum probabil nu ar trebui să nu de când ne-am sărutat zilele de folosire a tabelelor pentru aranjarea la revedere), aceasta poate fi dificilă să sară imediat.
Aveți două opțiuni principale pentru utilizarea acestui mixin: cu argumentul masa sau fără orice argument.
Sass:
css. un rând-element + rând
Atunci când se utilizează rând fara masa argument, a clearfix este adăugat și afișare $ rămâne setat la implicit, adică bloc. Eficace, înseamnă că orice se întâmplă după utilizarea elementului desemnat rând trebuie să-și înceapă propriul lucru pe un "rând".
Sass:
css .some-table-element-rând + rând (tabel)
Pe de altă parte, folosind rând (tabel), ai ghicit-o, face ca acest rând să facă parte dintr-un tabel. Ceea ce se întâmplă sub capotă, printre altele, este că acest mixin se fixează afișare: tabel și tabel-layout: fix.
Există încă o opțiune pe care o puteți oferi cu acest mixin. Puteți să transmiteți un argument (direcţia $ cu LTR sau RTL) care schimba direcția aspectului pentru rândul respectiv.
Sass:
css .some-row-element + rând (direcția $: RTL)
Dar să începem de la început. Exemplul următor tipic are 16 .rând container care utilizează rând mixin. Să vedem ce se întâmplă dacă renunți masa argument.
Haml:
"html .container
.rândul% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Sass:
"css .container + background-container-color: # f5f5f5
.rând + rând
img + span-coloane (1) înălțime: 60px margin-bottom: 5px background-color: # e64a19 "
După cum puteți vedea, browserul tratează primele patru .rând containerul nu este legat de un anumit rând și doar plutește în jos, atâta timp cât are spațiu disponibil pentru ei.
Două .rând containerele rezultă în același truc, stivuite unul peste celălalt.
Haml:
"html .container
.rândul% img% img% img% img
.rândul% img% img% img% img
% img% img% img% img
% img% img% img% img "
Nu cred prea mult. Deși nu știu cât de util ar fi acest lucru, deoarece instinctiv aș prefera să folosesc omega mixin pentru o astfel de ocazie. Ceea ce pare destul de inutil, cu toate acestea, este utilizarea rând (tabel) aici. Tocmai ai obține o coloană foarte lungă, care stivează toate cele 16 elemente unul de celălalt. Vă voi schimba imaginea de fundal, dar verificați exemplul codului dacă sunteți curios.
Până acum v-am arătat mecanica de bază a acestui amestec, mai ales dacă sunteți nou la joc. Acum ne apropiem de un teritoriu util. Să jucăm cu o masă reală.
Dacă nu v-ați păcălit cu mese înainte, vă recomandăm să ardeți Google înainte de a continua. Mai jos este un mic ghid de supraviețuire pentru cei care au nevoie să reîmprospăteze câteva termeni.
Aici avem a masa element. Acesta cuprinde a dinlicitația , care are un rând pentru a afișa diferitele rubrici ale coloanelor prin lea Etichete. Sub el veți găsi tbody care găzduiește datele reale pentru fiecare rând de tabele (tr) prin td Etichete.
Haml:
"html .container
%masa
%%%%%%%%%%%%%%%%%%%%%%%%%% % td Jane% td 223311% td Ciuperci% td Câine% td Pufos% td Metal Gear Solid%% tr% td Bob% td 331122% td Ceapă% td Pește% td Sharky% td Little Big Planet 2 "
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: darken (# f5f5f5, 50%)
tr + rând () text-align: centru
tamponare: top: 10px fund: 20px
td înălțime: 50px fundal: # 81d4fa padding-top: 2px "Acest lucru are ca rezultat o bordură neuniformă a tabelului, care se întinde numai în ceea ce privește conținutul acestor celule de date de tabel. fixați acest lucru folosind o mulțime de reguli CSS pentru a ordona lucrurile.
Ar trebui să existe o soluție simplă la acest drept? adăugare masa ca argument și afișare: tabel și tabel-layout: fix veniți la salvare! Ca să nu mai vorbim de puțină acoperire umple-părinte sub capotă.
Sass:
css tr + rând (tabel) text-align: center
Notă: O structură fixă de tabel ca aceasta are avantajul că nu numai că pune masa mai repede, dar lățimea coloanelor nu depinde de conținutul celulelor tabelului. Veți obține în mod uniform rânduri care se întind pe lățimea recipientului de masă. Eliminați o celulă de date tabelă (td) și veți vedea că celelalte elemente împart spațiul din acel rând în mod egal:
Să închidem un exemplu care arată comportamentul implicit al tabelelor fără folosind rând mixin la toate.
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: darken (# f5f5f5, 50%)
tr text-aliniere: centru
tamponare: top: 10px fund: 20px
td înălțime: 50px fundal: # 81d4fa padding-top: 2px "
După cum puteți vedea, celulele sunt distanțate uniform, dar nu folosesc tot spațiul adecvat care le este disponibil. Ei se orientează la cel mai lung conținut pe coloană și își ajustează celulele pentru a se alinia pe aceste linii.
Ne cerem scuze pentru că suntem excesiv de verbale rând dar sper ca această secțiune a făcut orice dureri de cap pe care le-ați putea avea cu mese și rânduri un pic mai puțin nedureroase.
Mutarea pe, Neat oferă o soluție ușoară dacă doriți ca un element să umple rapid părintele său, acoperind același număr de coloane. Nu trebuie să oferiți niciun argument. Acest amestec nu este nimic fantezist, dar ar putea fi util atunci când vă ocupați de interogări sau mese de presă.
Notă: Utilizarea deschideri de coloane (12) in loc de umple-părinte pentru a acoperi întreaga lățime a unui container exterior nu ar fi abordarea corectă - ar adăuga doar bagaje inutile.
Haml:
html .container% deoparte În afară de 3 coloane | fill - parent articol Articolul 5 coloane | umple-părinte
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + margine din partea superioară a containerului: 10px background-color: # f5f5f5
deoparte, articolul marginea inferioară: înălțimea de 5px: 200px
la o parte + coloane de span (3) + culoarea fundalului-umplere-mamă: # 81d4fa
articol + span-coloane (5) + culoarea fundal-umplere părinte: # e64a19 "
Rețineți că elementele care utilizează umple-părinte să ignore alte elemente din același rând și să aibă scopul de a acoperi întreaga lățime a părintelui lor fără a lua în considerare vecinii lor. Cred că este destul de simplă, să mergem mai departe!
Fiecare element din grila ta Neat are o $ Default-aspect-direcție care este setat la LTR (de la stânga la dreapta) în Setări / _grid.scss. Acest lucru înseamnă că în spatele scenei Neat utilizează întotdeauna a Direcția context cu de la stânga la dreapta.
Sub capota, acest amestec nu face altceva decât să schimbe direcția de flotare a elementului aplicat. Ce este neat este faptul că, într-un anumit context direcțional, să spunem de la stânga la dreapta, puteți aduna o grămadă de elemente de rețea și puteți schimba direcția de la dreapta la stanga-toate dintr-o dată, sub un singur bloc de coduri. Din nou, această soluție face lucrurile mai compacte și mai ușor de citit pentru dvs., precum și mai ușor de înțeles pentru cineva care nu este familiarizat cu un anumit proiect.
Haml:
html .container% deoparte 3 coloane% articol 9 coloane
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + margine din partea superioară a containerului: 10px background-color: # f5f5f5
deoparte, articolul marginea inferioară: înălțimea de 5px: 200px
+direcția-context (dreapta-la-stânga) deoparte + span-coloane (3) fundal-culoare: # 81d4fa
articol + span-coloane (9) fundal-culoare: # e64a19 "
Iată același demo fără Direcția context:
Iată un alt exemplu. Nimic nou pentru moment, este doar că coloanele au dimensiuni egale și de asemenea curg de la dreapta la stanga.
Haml:
html .container% deoparte 3 coloane% articol 3 coloane
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + margine din partea superioară a containerului: 10px background-color: # f5f5f5
deoparte, articolul marginea inferioară: înălțimea de 5px: 200px
+direcția-context (dreapta-la-stânga) deoparte + span-coloane (3) fundal-culoare: # 81d4fa
articol + span-coloane (3) fundal-culoare: # e64a19 "
Următorul truc mic are doar unul dintre aceste trei elemente de coloană care utilizează amestecul și, prin urmare, plutesc în părțile opuse ale containerului. Nimic prea magic, dar acest lucru ar putea fi util pentru a avea în geanta ta de trucuri.
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + margine din partea superioară a containerului: 10px background-color: # f5f5f5
deoparte, articolul marginea inferioară: înălțimea de 5px: 200px
deoparte + span-coloane (3) fundal-culoare: # 81d4fa
+direcția-context (de la dreapta la stânga) articol + span-coloane (3) fundal-culoare: # e64a19 "
Această ultimă secțiune a tutorialului acoperă câteva mixuri pe care am vrut să le menționez de dragul completării, dar pe care eu personal încerc să le evit deoarece nu mi-au dat mereu rezultatele pe care le așteptam. Dacă aveți o experiență mai bună folosindu-le, vă rog să-mi spuneți. În afară de aceasta, trei dintre ei vor fi în curând deprimați:
Accentsconagua
reset-displayreset-layout-direcțiereseteaza totNu prea ai de spus despre asta. Imaginați-vă că ați schimbat direcția aspectului din orice motiv și doriți să reveniți la $ Default-aspect-direcție (de la stânga la dreapta)? Aici mergeți, contextul implicit este restabilit! Nu este necesar nici un argument.
Sass:
"css .row + rând (direcția $: RTL)
.rândul reset-layout-direction "
Când ar putea fi util acest lucru? Buna intrebare! Documentația spune mai ales când trebuie să schimbi direcția într-un singur rând. Eu personal nu m-ar deranja prea mult. Mai întâi de toate, este planificat să fie depreciat în favoarea unui a direcţie mixin, și, de asemenea, mi-a dat o durere de cap surprinzătoare atunci când am vrut să o fac să funcționeze cu interogările mass-media.
Pentru a crea un bloc de cod care modifică proprietățile de afișare utilizate de mixuri în sine, aveți două opțiuni pe care le puteți trece la acest mixin: bloc și masa. Primul este evident și masa adaugă afișare: celulă de masă Pentru dumneavoastră. masă de celule forțează un element să se comporte ca a td element.
Sass:
css + context-display (tabel) .some-cell + span-columns (2)
Să presupunem că ați schimbat afișarea activă la masa ca în exemplul de mai sus, reset-display vă ajută să reveniți cu ușurință bloc. Nu mai are nici un argument. Documentația spune că este foarte util dacă este aplicată la singurele rânduri care și-au modificat valorile afișate.
Sass:
"css .row + rând (tabel)
.rând + resetare-afișare "
Dacă doriți să combinați reset-display și reset-layout-direcție într-un singur pas, cu asta veți obține reseteaza tot-nu sunt necesare argumente. Să spunem pe un rând pe care l-ați modificat masa si $ Default-aspect-direcție la RTL și doriți să reveniți.
Sass:
"css .row + rând (tabel, RTL)
.rând + resetare toate "
Ei bine, asta a fost unul lung. Mulțumesc că ați făcut-o și sper că ați găsit că este o călătorie interesantă în teritoriul Neat Mixin. Există încă un lucru de discutat; și anume toate variabilele pe care le aveți la dispoziție pentru a optimiza cadrul pentru nevoile dvs. Următorul tutorial este unul mai scurt, dar ne acoperă acoperirea cu Neat. Ne vedem acolo!
