Share
Sass är ett bra sätt att påskynda utvecklingen i fronten i allmänhet, jag använder den i alla mina projekt. Sass (som med alla andra förbehandlare) möjliggör inbyggda stilar, funktioner och förskrivna kod i vad som heter mixins. Stiftelsen har några olika versioner, för närvarande har vi täckt de vanligaste HTML / CSS-varianterna, men nu ska vi prata om en version byggd på Sass.
Teamet bakom Foundation har inte bara använt Sass för att tillåta mer vänlig och dynamisk styling, men de erbjuder även större anpassning i Sass-versionen än i HTML / CSS-versionen.
Sass är bra för dig som, som jag, är designers första och kodare andra. HTML och CSS är lätta att lära och få jobbet gjort, men det är ett stort hopp att gå från de enkla språken till jQuery och JavaScript. Med Sass kan du flörta med idén om funktioner, variabler och återanvändbar kod som verkligen hjälper till vid övergången till mer komplexa språk.
Vi kommer att dyka här inne, och vi måste använda terminal / kommandotolp för att göra det, men lägg inte av det som det är lättare än det ser ut. För att komma igång öppna Terminal (OS X) och klistra in i följande:
sudo gem installation zurb-foundation
Det kan ta lite tid att bearbeta, men bör resultera i en skärm så här:
När du har slutfört det här steget har du väsentligt lagt till grundkärnan i ditt system, så att du kan återanvända det som du vill utan att behöva gå till stiftelsens webbplats. Vad är coolt om att ta detta tillvägagångssätt är att med ett annat enkelt kommando kan du uppdatera den här kärnanvändbara ramen till antingen den senaste public build eller release kandidaten. För att göra detta klistra in en av följande i terminal:
sudo pärla uppdatering zurb-foundation
sudo pärla installera zurb-foundation --pre
Det finns ett sista steg i installationen och det är att installera Compass, vilket gör det möjligt för oss att skapa byggnader från Foundation för användning i våra projekt. Igen kan det ta lite tid så var tålamod. Klistra in följande:
sudo gem installation kompass
Efter installationen bör du ha en terminalutgång som ser ut så här:
Nu när vi har gått igenom vridningarna av att installera en rubinpärla och hålla den uppdaterad, låt oss konfigurera ett projekt så att vi kan börja analysera denna utvecklingsväg med Foundation.
När du vill starta ett nytt projekt öppnar du bara terminalen och skriver "cd" (ändra katalog), utan talmärken, då måste du antingen skriva in en sökväg eller skapa en mapp för projektet och dra det in till terminal. Se till att det finns ett mellanslag mellan "cd" och din väg. Följ detta med ett kommando som faktiskt kommer att skapa ditt projekt:
kompass skapar DITT PROJEKT-NAMN -r zurb-foundation - använder foundation
Se till att du ändrar texten "DITT PROJEKT-NAMN" för ditt faktiska projektnamn och träffa tillbaka. Du ser då många många informationslinjer som resulterar i ett val. Det här valet dikterar om dina Sass-filer kommer att konverteras till CSS-filer när du sparar dem, eller manuellt när du väljer att konvertera dem. Jag använder alltid det andra valet, vilket automatiskt skapar CSS-filer när jag sparar mina Sass-filer. Du borde se något så här:
Du kan se från detta att mycket har hänt och ditt stiftelsesbaserade projekt är födt. När du väl valt din kompileringsmetod genom att använda kompasskompilationen eller kompassvaktmetoden kan du fånga koden som du kan se längst ner på bilden. Detta sparar bara lite tid eftersom det lägger till ditt utskriftsformat och normaliserar.
Härifrån kan du börja bygga ditt projekt med Sass.
Om du använder Windows kan du fortfarande använda Sass-versionen av Foundation, det tar bara några steg att komma igång. Först av, låt oss ta Ruby. Ruby är vad som tillåter oss att installera denna Sass-baserade versionen av Foundation. Till skillnad från OS X har Windows inte det här installerat som standard, så vi måste hämta det.
Nu vill du ha den senaste versionen (2.0.0 vid skrivetid) och beroende på vilken arkitektur du använder väljer du antingen standarden för 32-bitars maskiner eller x64 för 64-bitars maskiner. Om du är osäker på vilken, måste du helt enkelt högerklicka på "Min dator" och klicka på "Egenskaper" för att ta reda på. Om du misslyckas, gå med 32 bitar.
När du är nedladdad, kör igenom installationen. Kryssa inte / ändra någonting om du inte vet vad du gör. När installationen är klar gå till program, sedan Ruby och klicka på "Start Command Prompt with Ruby". När du har laddat upp kopiera följande kod och klistra in i kommandotolken kan du göra det genom att högerklicka på översta fältet och gå till redigering> klistra in.
gem installation zurb-foundation
Du ser något liknande till detta:
Du kan också hålla Stiftelsen uppdaterad med antingen kommandot för allmänhetens byggnad eller kommandot för släppkandidat:
gem uppdatering zurb-foundation
gem installation zurb-foundation --pre
Nu när vi har den grundläggande inställningen, låt oss fortsätta och installera den slutliga delen Compass. Precis som tidigare kan vi installera Kompass med ett kommando:
gem installation kompass
Var tålamod, detta kommer att resultera i en skärm så här:
För att faktiskt skapa ditt projekt måste du byta till en katalog som "Desktop" och köra ett kommando. Du kan göra detta genom att skriva "cd" utan talmärken, följt av ett mellanslag, följt av en sökväg. För att lägga till själva sökvägen kan du antingen skriva in en eller dra och släpp mappen i kommandotolken.
När du har ändrat katalogen, kör det här kommandot och var noga med att ändra DITT PROJEKT-NAMN för ditt faktiska projektnamn.
kompass skapar DITT PROJEKT-NAMN -r zurb-foundation - använder foundation
Och det är allt! Efter detta finns inga skillnader mellan Windows och OS X.
Om du använder OS X finns ett bra utvecklingsverktyg som heter CodeKit. Denna ansökan minskar automatiskt JS, CSS, SCSS- och konverterar SCSS till CSS, vilket innebär att du kan döda terminal och använda CodeKit istället. Det erbjuder också felmarkering för både JS och SCSS, inklusive bibliotek som jQuery.
Jag vet vad du tänker; "Jag har inte OS X". Inga bekymmer, jag har inte glömt över dig Windows-människor - du kan ta tag i närmaste motsvarande applikation som heter Prepros.
I nästa del tittar vi på vad du kan göra med denna mer dynamiska Sass-baserade version av Foundation, inklusive anpassning av byggnaden, ändring av standardstilar och mycket mer.
Accentsconagua