Share
În acest tutorial vom construi un sistem simplu, receptiv, folosind CSS. Odată ce suntem familiarizați cu modul în care funcționează, îl vom îmbunătăți cu Sass, învățând câteva caracteristici principale Sass pe parcurs.
Să examinăm rapid ceea ce va arăta sistemul nostru de rețea. Există moduri mai inteligente de construire a rețelelor, care sunt mai puțin invazive în ceea ce privește marcarea necesară, dar această rețea ne oferă o mare oportunitate de a practica tehnici simple și utile Sass. Folosește un element de înfășurare, apoi alte elemente în cadrul aceluia care acționează ca rânduri, apoi mai multe elemente din cadrul celor care acționează ca coloanele noastre.
Un pic trippy, dar ai ideea ... Pentru început, tot ce avem nevoie este un fișier CSS, deschideți astfel un nou document în editorul de cod și denumiți-l "grid.css".
Primul lucru pe care îl vom adăuga este o regulă de resetare globală și o regulă de dimensionare în cutie. Acest lucru va asigura că se adaugă umplutura aplicată elementelor noastre în dimensiunile calculate, oferindu-ne o mai mare libertate pentru definirea lățimii coloanelor.
*, *: după, *: înainte de marja: 0; umplutura: 0; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine;
Apoi vom adăuga o regulă pentru a vă asigura că toate imaginile folosite se comportă fluent.
img width: auto; max-lățime: 100%; înălțime: auto! important;
Acum câteva reguli pentru a ne asigura că elementul de înfășurare se comportă în sine.
.înveliș lățime: 100%; marja: 0 auto;
Notă: Rețineți că lucrăm mai întâi la telefonul mobil. Containerul nostru pornește la o lățime de vizualizare de 100%, dar vom modifica acest parametru pentru ecrane mai mari.
Toate elementele din rândul nostru conțin coloanele, asigurându-se că grupurile de coloane se clasează reciproc în mod corespunzător. Să adăugăm ceva general .clearfix regulile pentru elemente de înfășurare și elemente de rând.
.wrap: după, .row: după conținut: ""; afișare: tabel; clar: ambele;
Notă: Nu trebuie să numim aceste elemente .învelitoare, .rând și .coloană, putem fi mult mai creativi decât asta. Aceste nume sunt foarte clare în scopul acestui tutorial.
Vom avea o serie de clase de coloane, în funcție de mărimea fiecăruia (de exemplu .coloană-1 și .coloană-6. Să folosim un selector de atribute pentru a direcționa și a schița toate acestea într-un singur pas.
[class * = 'coloana'] float: left; padding: 1em; lățime: 100%; min-înălțime: 1px;
Acest selector spune; luați orice element a cărui clasă conține șirul coloană- și aplicați următoarele stiluri. Prin urmare, toate elementele coloanei noastre vor pluti la stânga, vor avea o căptușeală 1em (aceasta face jgheterul nostru și un spațiu vertical) și va umple 100% din lățimea ferestrei de vizualizare (din nou, lucrăm mai întâi la telefon pe mobil). În cele din urmă, min-înălțime: 1px vă că coloana este afișată corespunzător, chiar dacă nu are conținut.
Credeți sau nu, acum avem o rețea! Următorul marcaj este tot ce ne trebuie.
Putem folosi orice combinație de coloane în rânduri, aruncăm o privire la demo pentru a vedea ce ar trebui să aveți în prezent.
Această captură de ecran prezintă mai multe coloane decât în fragmentul de mai sus Aceasta este grija noastră mobilă, acum să adăugăm o interogare media pentru a ne oferi un aspect diferit pentru ecrane mai mari. Veți avea nevoie să determinați puncte de întrerupere pentru grila proprie, dar vom folosi un punct de arbitraj arbitrar 30em.
numai ecranul @media și (min-width: 30em)
Orice stiluri pe care le plasăm în această interogare media vor avea efect pe ecrane de 30 de milioane și mai largi. Vom folosi acest punct pentru a ne împărți coloanele în lățimi corecte.
Cât de mare ar trebui să fie fiecare coloană? Asta depinde de câte coloane avem. Pentru această demonstrație merg să lucrez cu douăsprezece coloane, astfel încât fiecare să fie exact o doisprezecime (1/12) din ambalaj. Pentru o coloană care se întinde pe două lățimi, va fi două doisprezece, si asa mai departe. Iată ce ne dă:
@media numai ecran și (min-lățime: 30em) .wrapper lățime: 95%; max-lățime: 65cm; . coloana-1 lățime: 8.33333%; . coloana-2 lățime: 16,66667%; coloana-3 lățime: 25%; coloana-4 lățime: 33,33333%; coloana-5 lățime: 41,66667%; . coloana-6 lățime: 50%; coloana-7 lățime: 58,33333%; . coloana-8 lățime: 66,66667%; . coloana-9 lățime: 75%; coloana-10 lățime: 83,33333%; coloana-11 lățime: 91,66667%; coloana-12 lățime: 100%;
Veți vedea, de asemenea, că am făcut-o .învelitoare element mai mic decât lățimea totală a ecranului și dat fiind a lățimea maximă. Uitați-vă ce sa făcut cu grila noastră.
Probabil că veți dori să alegeți o placă mai potrivită în grila proprie Grila noastră CSS funcționează, dar ce s-ar întâmpla dacă am fi dorit de fapt șaisprezece coloane în rețeaua noastră? Sau mai mult? Va trebui să recalculam fiecare coloană și să o introducem manual în fișierul nostru CSS de fiecare dată. Să nu mai vorbim că CSS-ul nostru ar deveni mai lung și mai dificil de gestionat. Din fericire, Sass (sau orice alt preprocesor) ne poate ajuta.
Acest tutorial nu are legătură cu înființarea Sass, presupune că deja știți cum să faceți acest lucru. Dacă nu este cazul și trebuie să faceți lucrurile, aruncați o privire la Mastering Sass: Lecția 1 sau SASS și Compass pentru Web Designeri: Introducere.
Odată ce ați instalat un proiect Sass, scufundați în pasul următor.
Sass ne va ajuta să ne curățăm CSS-ul în tot felul de moduri, dar primul lucru pe care îl putem face este extragerea oricăror valori utile și stocarea lor în variabile. Începeți prin a începe un nou parțial numit "_variables.scss"; un fișier Sass care nu va fi compilat direct în CSS, dar vom face referire în celelalte fișiere.
// variabilele grilei $ grilă-coloane: 12; $ grid-max-lățime: 65cm; // breakpoints $ breakpoint-small: "numai ecran și (min-width: 20em)"; $ breakpoint-medium: "numai ecran și (min-width: 30em)";
Aceste variabile ne dau cantitatea de coloane cu care dorim să lucrăm; 12 în acest moment, dar ar putea fi ușor modificat la 16, poate la 32 (oricare doriți într-adevăr). De asemenea, am stocat câteva puncte de întrerupere în variabile ca șiruri de caractere, chiar dacă în prezent folosim doar unul.
Vom folosi aceste lucruri în curând, dar mai întâi vom instala câteva mixuri.
Amestecurile Sass sunt bucăți de cod pe care le putem defini odată și apoi reutilizăm în altă parte în proiectul nostru. De exemplu, am putea lua primul set de reguli pe care le-am stabilit frontieră-box și extrageți majoritatea acestuia într-un amestec. Începem cu:
*, *: după, *: înainte de marja: 0; umplutura: 0; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine;
Apoi scoatem o parte din ea pe care o putem reutiliza, definind un amestec pe care l-am numit "box-box", așa cum este:
@mixin border-box -webkit-box-size: border-box; -moz-box-size: caseta de margine; box-size: caseta de margine;
Atunci noi @import variabilele și amestecurile noastre în principalul "grid.scss", folosind mixinul cu un @include afirmație.
@import "variabile"; @import "mixins"; *, *: după, *: înainte de marja: 0; umplutura: 0; @ includeți caseta de frontieră;
Putem face un lucru similar cu regulile clare, așa cum sugerează Sebastian Ekström. În acest caz, luăm regulile de clarificare recomandate de Nicolas Gallagher și le adăugăm în fișierul nostru mixin cu un selector de locașuri (%):
% clarfix * zoom: 1; &: înainte, &: după content: ""; afișare: tabel; &: după clar: ambele;
Selectorul de locaș ne permite să definim bucăți întregi de stil care se produc numai atunci când le extindem în altă parte, după cum urmează:
.wrapper, .row @extend% clarfix;
Odata compilate, acele cateva linii ale lui Sass arata astfel:
.înveliș, .row * zoom: 1; .wrapper: înainte, .row: înainte, .wrapper: după, .row: după content: ""; afișare: tabel; .wrapper: după, .row: după clar: ambele;
Să facem uz de unele dintre variabilele pe care le-am înființat, nu? În primul rând, putem schimba lățimea maximă valoare pe ambalaj. Acest:
.înveliș lățime: 95%; max-lățime: 65cm;
devine aceasta:
.înveliș lățime: 95%; max-lățime: $ grid-max-width;
Acum, să facem același lucru cu interogarea noastră media. Acest:
numai ecranul @media și (min-width: 30em)
va fi îmbunătățită cu ajutorul nostru $ Breakpoint-mediu variabil:
@media # $ breakpoint-medium
Notă: veți vedea că am împachetat variabila noastră în # . Acest lucru este denumit interpolare. În mod normal, acest lucru se întâmplă dacă avem nevoie să scoatem o variabilă în alta, dar este necesară în acest caz deoarece compilamentul Sass se deplasează peste interogările media dacă @mass-media nu este urmată direct de armături (). Puteți citi mai multe despre acest lucru în Hugo Giraudel's All You Ever trebuie să știți despre interpolarea Sass.
Pentru a folosi variabila noastră finală, $ grid-coloane, trebuie să folosim mai multă funcționalitate Sass; bucle.
Definițiile lățimii coloanelor noastre sunt exact aceleași, în afară de valorile reale. Va fi mult mai curat dacă vom emula o definiție a coloanei pentru cât mai multe coloane de câte ori avem nevoie, schimbând valorile de fiecare dată. Pentru a face acest lucru putem folosi un Sass @pentru buclă, care arată astfel:
@ pentru $ i de la 1 la 12 // conținut în buclă
Aceasta va trece peste 12 iterații, iar de fiecare dată valoarea $ i va reflecta acea buclă. Putem ieși $ i asa:
@ pentru $ i de la 1 la 12 .column - # $ i
Din nou, veți observa că folosim # în jurul $ i pentru a extrage valoarea ca un șir pe care îl adăugăm la .coloană- selector. Acest lucru ne dă următoarele după compilație:
.coloana-2 . coloana-3 coloana-4 coloana-5 coloana-6 9 . Coloana-10 . Coloana-11 . Coloana-12
Sclipitor! Să folosim acum câteva calcule pentru a scoate stilurile corecte în cadrul acestor selectori.
Ne descurcăm bine, dar acum trebuie să scoatem ceva asemănător pentru fiecare selector:
.coloana-5 lățime: 41,66667%;
Lățimea coloanei este calculată ca 100% împărțită la numărul total de coloane, înmulțită cu numărul coloanei. În acest caz 100% / 12 * 5 = 41,66667%. Acesta este, prin urmare, calculul pe care trebuie să-l aplicăm, schimbând valorile relevante pentru variabile.
@ pentru $ i de la 1 la 12 columă - # $ i lățime: 100% / 12 * $ i;
Sass efectuează acum calculele pentru noi, oferindu-ne următoarele:
.coloana 1 (lățime: 8.33333%; . coloana-2 lățime: 16,66667%; coloana-3 lățime: 25%; coloana-4 lățime: 33,33333%; coloana-5 lățime: 41,66667%; . coloana-6 lățime: 50%; coloana-7 lățime: 58,33333%; . coloana-8 lățime: 66,66667%; . coloana-9 lățime: 75%; coloana-10 lățime: 83,33333%; coloana-11 lățime: 91,66667%; coloana-12 lățime: 100%;
Ca un ultim final de curățare, putem folosi $ grid-coloane variabilă, în loc de valoare 12:
@ pentru $ i de la 1 la $ grid-coloane .column - # $ i lățime: 100% / $ grilă-coloane * $ i;
Acum, dacă vrem să schimbăm numărul de coloane, schimbăm pur și simplu variabila, iar calculele vor fi făcute pentru noi! De exemplu, schimbarea $ grid-coloane la 4 dați-ne următoarele CSS:
@media numai ecran și (min-lățime: 30em) .wrapper lățime: 95%; max-lățime: 65cm; coloana 1 (lățime: 25%; coloana 2 (lățime: 50%; coloana-3 lățime: 75%; coloana-4 lățime: 100%;
Grid.scss-ul nostru final este de 42 de linii de cod; mai puțin decât CSS-ul inițial.
@import "variabile"; @import "mixins"; *, *: după, *: înainte de marja: 0; umplutura: 0; @ includeți caseta de frontieră; img width: auto; max-lățime: 100%; înălțime: auto! important; .wrapper lățime: 100%; marja: 0 auto; .wrapper, .row @extend% clearfix; [clasa * = 'coloana'] float: stânga; padding: 1em; lățime: 100%; min-înălțime: 1px; @media # $ breakpoint-mediu .wrapper lățime: 95%; max-lățime: $ grid-max-width; @ pentru $ i de la 1 la $ grid-coloane .column - # $ i lățime: 100% / $ grilă-coloane * $ i;
Pe parcursul acestui proces am analizat variabilele Sass, mixins, placeholders, extensii, bucle, operatori și chiar interpolare. Acesta este un set incredibil de puternic de caracteristici și un început excelent dacă tocmai intrați în Sass.
Cum altfel ați putea îmbunătăți grila pe care am construit-o? Ce altceva ați adăuga sau chiar eliminați? Spuneți-ne în comentariile!
Accentsconagua