Cum să utilizați Susy Sass Grids Superpowered

Susy este un set puternic de mixe Sass pentru construirea de planuri bazate pe grilă.

Ce e atât de grozav cu Susy? Vă vom arăta elementele de bază ale colaborării cu Susy în acest tutorial, dar aici este o listă de profesioniști care trebuie luați în considerare:

• Anti-cadru: Susy nu vă impune nici o filosofie specifică a grilei. Astfel, nu veți fi abandonați într-un fișier CSS și nu folosiți clase din cutie (așa cum ați face cu un cadru, cum ar fi Bootstrap); în schimb, veți defini propriile reguli de rețea, lăsându-i pe Susy să aibă grijă de calculele pentru dvs..
• Mixin orientat, fără bloatSusy nu este un cadru. Nu are un kilobyte, deoarece nu emite reguli CSS pe care nu le definiți manual.
• Configurație puternică, valori implicite sensibile: Susy utilizează regulile de configurare în timpul procesului de construire, dar nu necesită învățarea totului pentru a începe.

Acești trei simpli profesioniști sunt mai mult decât suficienți pentru a da Susy o privire. Să începem!

Înființat

În primul rând, va trebui să fiți suficient de familiari cu Sass pentru a scrie și ao compila. În momentul acestei scrieri, Susy implementează câteva caracteristici Sass care nu sunt acceptate în prezent de LibSass (compilatorul Sass bazat pe C), astfel încât va trebui să utilizați versiunea Ruby de la Sass. Începeți prin a instala Sass și aflați cum să utilizați ceas care va fi esențială pentru lucrul cu Sass în general, precum și cu Susy.

Apoi, va trebui să-l aduci pe Susy pe calculatorul tău. Deoarece singura dependență a lui Susy este chiar Sass, poți descărca fișierul zip al proiectului de la GitHub și copia conținutul folderului Sass în proiectul tău.

Apoi, va trebui să importați Susy în fișierul dvs. Sass.

@import "susy"; 

Aceasta presupune că sunteți într-un director cu conținutul folderului Sass.

Salut coloane: Primul exemplu

Susy este fundamental un set de amestecuri, care sunt ca și funcții în Sass. Aceste mixuri sunt numite în interiorul codului dvs. Sass și când compilatorul Sass rulează, acesta va analiza definițiile mixin din fișierele Susy și va determina ieșirea corespunzătoare.

Cel mai important mixin din Susy este deschidere mixin, care arată astfel:

.conținut @ include span (20%);  

 deschidere mixin se bazează, de asemenea, pe recipient mixin, care stabilește ceea ce Susy numește un "context de aspect".

.containerul @ include container (1180px);  

Susy vă permite, de asemenea, să creați deschideri bazate pe un număr prestabilit de coloane într-o rețea:

.trimestrul @ include span (4 din 12);  

Puterea lui Susy depășește cu mult grila medie, permițând configurații mai mici decât cele normale. Să începem cu un exemplu simplu: o dispunere de 9 coloane.

.al nouălea @ include span (1 din 9);  

Sass Maps

Susy vă permite să configurați configurația prin $ Susy variabil. Crearea unei hărți Sass vă permite să determinați o serie de preferințe privind modul în care Susy funcționează pentru a vă stabili deschiderile. Susy implementează a schemă mixin care emite o hartă de configurație. Iată setările implicite, luate direct din documentația lui Susy.

$ susy: (debit: ltr, matematică: fluid, ieșire: flotor, poziția jgheabului: după, container: autocolant, poziție container: centru, coloane: 4, jgheaburi: .25; (imagine: ascunde, culoare: rgba (# 66f, .25), ieșire: fundal, comutare: dreapta sus), utilizare-personalizat: (imagine-fundal : adevărat, opțiuni de fundal: false, dimensionare în cutie: adevărat, clarfix: false, rem: true,)); 

Puteți să înlocuiți orice setare specifică adăugând-o la propria dvs. $ Susy Hartă:

$ susy: (coloane: 16, ultimul flux: de la) 

Opțiunile schimbate în mod obișnuit sunt numărul de coloane, lățimea jgheabului și producție opțiune. Fiecare dintre aceste opțiuni de configurare face ceva diferit. 

Exemple practice

Din motive de acest tutorial, nu vom trece prin toate opțiunile de configurare (documentația lui Susy face o treabă excelentă de a le explica). În schimb, să prezentăm câteva exemple practice despre cum puteți folosi Susy.

Span și containere Mixins

Aici, putem vedea o utilizare de bază a amestecurilor span și containere:

Notă: pentru a aprecia coloanele la lățime maximă, aruncați o privire la versiunea completă a ecranului.

Există câteva lucruri de observat cu acest exemplu. Am creat un exemplu controversat de tablou de bord. Am inclus, de asemenea, un pic de JavaScript care aduce imagini false utilizatorilor din API-ul uifaces.com.

Piesele specifice lui Susy sunt coloanele. În acest exemplu, am creat un aspect receptiv utilizând @ include span () sintaxă. De asemenea, folosim capabilitățile de cuibărire ale SCSS în câteva locuri. Rețineți că Susy se potrivește perfect cu sintaxa obișnuită a interogării media. Am creat un container din .statistici folosind secțiunea @ includeți containerul;.

De asemenea, trebuie remarcat faptul că există coloane imbricate în acest exemplu particular; .Avatar elementele sunt imbricate într-o altă coloană Susy, iar acest lucru funcționează perfect, deoarece Susy utilizează, în mod implicit, lățimi de lichid.

Layout Shorthand

Apoi, putem vedea o utilizare a stenografiei lui Susy pentru aspectul cu o grilă care are coloane mai mari în mijloc decât pe exterior.

În acest exemplu, folosim câteva opțiuni diferite care ar trebui să arate noi pentru dvs. Mai întâi, vom crea marcaje folosind Haml. Haml este un înlocuitor de markup sensibil la spațiul alb, pentru HTML construit pe Ruby. Gândiți-vă că este un pic ca un preprocesor pentru HTML.

Să ne uităm la ceea ce creează exemplul nostru.

.caramida-list

Aceasta creează o 

- 30 de ori nu |

 .col% img src: "http://hhhhold.com/jpeg/700?v=#i" 

$ grilă: (1 2 5 5 2 1);