Hur man använder Susy Superpowered Sass Grids

Susy är en kraftfull uppsättning Sass mixins för att bygga gridbaserade layouter.

Vad är så bra med Susy? Vi visar dig grunderna i att arbeta med Susy i denna handledning, men här är en lista över proffs att tänka på:

• Anti-ramverk: Susy lägger ingen särskild gridfilosofi på dig. Således kommer du inte att släppa i en CSS-fil och använda klasser ur lådan (som du skulle med en ram som Bootstrap); istället definierar du dina egna rutinregler, så att Susy tar hand om beräkningarna för dig.
• Mixin-oriented, no-bloat: Susy är inte en ram. Det har inte ett kilobyteantal, eftersom det inte matar ut några CSS-regler, definierar du inte själv själv.
• Kraftfull konfiguration, förnuftiga standardvärden: Susy använder konfigurationsregler under byggprocessen, men det kräver inte att du lär dig allt för att komma igång.

Dessa tre enkla proffs är mer än tillräckligt för att ge Susy en titt. Låt oss börja!

Inrätta

Först måste du vara bekant nog med Sass att skriva och sammanställa den. Vid tidpunkten för denna skrivning implementerar Susy några Sass-funktioner som för närvarande inte stöds av LibSass (den C-baserade Sass-kompilatorn), så du måste använda Ruby-versionen av Sass. Börja med att installera Sass och lära dig hur du använder Kolla på kommando, vilket är viktigt för att arbeta med Sass i allmänhet, liksom Susy.

Därefter måste du få Susy installerat på din dator. Eftersom Susys enda beroende är Sass själv kan du ladda ner projektets zip-fil från GitHub och kopiera innehållet i Sass-mappen till ditt projekt.

Därefter måste du importera Susy till din Sass-fil.

@import "susy"; 

Det förutsätter att du är i en katalog med innehållet i Sass-mappen.

Hej kolumner: Första exemplet

Susy är i grunden en uppsättning mixins, som är som funktioner i Sass. Dessa mixins kallas inuti din Sass-kod, och när Sass-kompilatorn körs, kommer den att se på mixindefinitionerna i Susy-filerna och bestämma rätt utdata.

Den viktigaste mixin i Susy är spänna mixin, som ser ut så här:

.innehåll @include span (20%);  

De spänna mixin är också beroende av behållare mixin, som sätter upp vad Susy kallar en "layout context".

.behållare @ include container (1180px);  

Susy tillåter dig också att skapa spans baserat på ett förinställt antal kolumner i en nätverkssats:

.kvart @include span (4 av 12);  

Susys kraft går långt utöver det genomsnittliga gallret, vilket möjliggör mindre än vanliga rutkonfigurationer. Låt oss börja med ett enkelt exempel: en 9-kolonnlayout.

.nionde @include span (1 av 9);  

Sass Maps

Susy kan du konfigurera konfigurationen via $ susy variabel. Genom att skapa en Sass-karta kan du bestämma ett antal preferenser om hur Susy arbetar för att lägga ut dina spänner. Susy genomför a layout mixin som matar ut en konfigurationskarta. Här är standardinställningarna, som tas direkt från Susys dokumentation.

$ susy: (flöde: ltr, matte: vätska, utgång: flyt, gutterposition: efter, behållare: auto, behållarposition: centrum, kolumner: 4, rännor: .25, kolonnbredd: falskt, globalt -formatering: innehållsruta, sista flöde: till, felsökning: (bild: gömma, färg: rgba (# 66f, .25), utgång: bakgrund, växla: högra höger), användningsanpassad: : true, background-options: false, box-size: true, clearfix: false, rem: true,)); 

Du kan åsidosätta någon specifik inställning genom att lägga till den själv $ susy Karta:

$ susy: (kolumner: 16, sista flöde: från) 

Vanligt ändrade alternativ är kolumnräkningen, rännans bredd och produktion alternativ. Var och en av dessa konfigurationsalternativ gör något annorlunda. 

Praktiska exempel

För denna handledning skull går vi inte igenom alla konfigurationsalternativ (Susys dokumentation gör ett bra jobb för att förklara dem). Låt oss istället gå igenom några praktiska exempel på hur du kan använda Susy.

Span och Container Mixins

Här kan vi se en grundläggande användning av spänn- och behållarmixinerna:

Notera: För att uppskatta kolumnerna i full bredd, ta en titt på helskärmsversionen.

Det finns några saker att märka med detta exempel. Vi har skapat ett konstruerat exempel på en instrumentpanel. Vi har också inkluderat en liten bit av JavaScript som hämtar falska användarbilder från uifaces.com API.

De Susy-specifika bitarna är kolumnerna. I det här exemplet har vi skapat en lyhörd layout med användning av @include span () syntax. Vi använder också SCSSs nestningsfunktioner på några få platser. Observera att Susy passar bra med din vanliga synfält för mediasökning. Vi har skapat en behållare ur .statistik avsnitt med @ inkludera behållare.

Det bör också noteras att det finns nestade kolumner i detta speciella exempel; de .avatar element är nestade inuti en annan Susy kolumn, och detta fungerar helt bra eftersom Susy använder standardviddsbredd som standard.

Layout Shorthand

Därefter kan vi se en användning av Susys stenografi för layout med ett galler som har större kolumner i mitten än på utsidan.

I det här exemplet använder vi några olika alternativ som borde se nytt ut för dig. Först skapar vi vår markering med hjälp av Haml. Haml är en whitespace-känslig markup ersättning för HTML byggd ovanpå Ruby. Tänk på att det är lite som en förprocessor för HTML.

Låt oss titta på vad vårt exempel skapar.

.tegel listan

Detta skapar en 

- 30 gånger gör | i |

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

$ rutnät: (1 2 5 5 2 1);