Slik bruker du Susy Superpowered Sass Grids

Susy er et kraftig sett med Sass mixins for å bygge gridbaserte layouter.

Hva er så bra med Susy? Vi vil vise deg grunnleggende om å jobbe med Susy i denne opplæringen, men her er en liste over proffene å vurdere:

• Anti-rammeverket: Susy pålegger ingen spesifikke gridfilosofi på deg. Dermed vil du ikke slippe i en CSS-fil og bruke klasser ut av boksen (som du ville med et rammeverk som Bootstrap); I stedet vil du definere dine egne gridregler, slik at Susy tar vare på beregningene for deg.
• Mixin-orientert, ikke-oppblåst: Susy er ikke et rammeverk. Det har ikke et kilobyttall, fordi det ikke sender noen CSS-regler du ikke selv definerer selv.
• Kraftig konfigurasjon, fornuftige standardinnstillinger: Susy bruker konfigurasjonsregler under byggingsprosessen, men det krever ikke at du lærer alt for å komme i gang.

Disse tre enkle proffene er mer enn nok til å garantere å gi Susy en titt. La oss komme i gang!

Sett opp

Først må du være kjent nok med Sass å skrive og kompilere den. På tidspunktet for denne skrivingen implementerer Susy noen Sass-funksjoner som for øyeblikket ikke støttes av LibSass (den C-baserte Sass-kompilatoren), så du må bruke Ruby-versjonen av Sass. Start med å installere Sass og lær hvordan du bruker se kommando, som vil være viktig for å jobbe med Sass generelt, samt Susy.

Deretter må du få Susy installert på datamaskinen din. Fordi Susys eneste avhengighet er Sass selv, kan du laste ned prosjektets zip-fil fra GitHub og kopiere innholdet i Sass-mappen til prosjektet ditt.

Deretter må du importere Susy inn i Sass-filen din.

@import "susy"; 

Dette forutsetter at du er i en katalog med innholdet i Sass-mappen.

Hei kolonner: Første eksempel

Susy er i utgangspunktet et sett av mixins, som er som funksjoner i Sass. Disse mixins kalles inne i Sass-koden, og når Sass-kompilatoren kjører, vil den se på mixin-definisjonene i Susy-filene og bestemme riktig utgang.

Den viktigste mixin i Susy er span mixin, som ser slik ut:

.innhold @include span (20%);  

De span mixin stoler også på container mixin, som setter opp hva Susy kaller en "layout kontekst".

.container @ include container (1180px);  

Susy lar deg også lage spenner basert på et forhåndsinnstilt antall kolonner i et gridsett:

.kvart @include span (4 av 12);  

Susys kraft går langt utover gjennomsnittlig rutenettet, noe som gjør det mulig for mindre enn normale rutenettkonfigurasjoner. La oss starte med et enkelt eksempel: en 9-kolonne layout.

.niende @include span (1 av 9);  

Sass Maps

Susy lar deg konfigurere konfigurasjonen via $ susy variabel. Ved å opprette et Sass-kart kan du bestemme en rekke preferanser om hvordan Susy jobber for å legge ut spansene dine. Susy implementerer a oppsett mixin som utgir et konfigurasjonskart. Her er standardinnstillingene, hentet direkte fra Susys dokumentasjon.

$ susy: (flyt: ltr, matte: fluid, utgang: flyt, gutterposisjon: etter, container: auto, beholderposisjon: senter, kolonner: 4, takrenner: .25, kolonnebredde: falsk, global boks -formatering: innholds boks, siste strøm: til, feilsøking: (bilde: skjul, farge: rgba (# 66f, .25), utgang: bakgrunn, veksle: øverst til høyre,), bruk-tilpasset: : true, background-options: false, box-size: true, clearfix: false, rem: true,)); 

Du kan overstyre en bestemt innstilling ved å legge den til din egen $ susy kart:

$ susy: (kolonner: 16, siste flyt: fra) 

Vanligvis endrede alternativer er kolonneantalet, ryggbredden og produksjon alternativ. Hver av disse konfigurasjonsalternativene gjør noe annerledes. 

Praktiske eksempler

For denne veiledningens skyld vil vi ikke gå gjennom alle konfigurasjonsalternativene (Susys dokumentasjon gjør en god jobb med å forklare dem). I stedet la oss gå gjennom noen få praktiske eksempler på hvordan du kan bruke Susy.

Span og Container Mixins

Her kan vi se en grunnleggende bruk av spenningen og beholderblandingen:

Merk: For å sette pris på kolonnene i full bredde, ta en titt på fullskjermversjonen.

Det er noen ting å legge merke til med dette eksemplet. Vi har laget et godt eksempel på et dashbord. Vi har også inkludert en liten bit av JavaScript som henter falske brukerbilder fra uifaces.com API.

De Susy-spesifikke stykkene er kolonnene. I dette eksemplet har vi opprettet et responsivt layout ved hjelp av @include span () syntaks. Vi bruker også SCSSs nesting evner på noen få steder. Vær oppmerksom på at Susy passer fint med din vanlige syntakseksempel. Vi har laget en container ut av .statistikk delen bruker @ containere container.

Det skal også bemerkes at det er nestede kolonner i dette spesielle eksempelet; de .avatar elementer er nestet i en annen Susy-kolonne, og dette virker helt bra fordi Susy bruker standardbredder som standard.

Layout Shorthand

Deretter kan vi se en bruk av Susys stenografi for layout med et rutenett som har større kolonner i midten enn på utsiden.

I dette eksemplet bruker vi noen få forskjellige alternativer som bør se ut til deg. Først skaper vi oppmerkningen vår ved hjelp av Haml. Haml er en white-space-sensitive markup erstatning for HTML bygget på toppen av Ruby. Tenk på det som å være litt som en preprosessor for HTML.

La oss se på hva vårt eksempel skaper.

.murstein-liste

Dette skaper en 

- 30 ganger gjør | i |

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

$ grid: (1 2 5 5 2 1);