Share
Sass er en fin måte å øke hastigheten på frontend-utviklingen generelt, jeg bruker den i alle mine prosjekter. Sass (som med alle andre forprosessorer) tillater innlejrede stiler, funksjoner og forhåndskrevet kode i det som kalles mixins. Foundation har noen forskjellige versjoner, for øyeblikket har vi dekket de vanligste HTML / CSS varianter, men nå snakker vi om en versjon bygget på Sass.
Teamet bak Foundation har ikke bare brukt Sass til å tillate mer vennlig og dynamisk styling, men de tilbyr også større tilpasning i Sass-versjonen enn i HTML / CSS versjonen.
Sass er flott for de av dere som, som meg, er designere først og coders andre. HTML og CSS er lett nok til å lære og få jobben gjort, men det er et stort hopp å gå fra de enkle språkene til jQuery og JavaScript. Ved hjelp av Sass kan du flette med ideen om funksjoner, variabler og gjenbrukbar kode som virkelig hjelper i overgangen til mer komplekse språk.
Vi kommer til å dykke rett inn her, og vi må bruke terminal / kommandoprompt for å gjøre det, men vær ikke slått av da det er lettere enn det ser ut. For å komme i gang, åpne Terminal (OS X) og lim inn følgende:
sudo gem installasjon zurb-foundation
Det kan ta litt tid å behandle, men skal resultere i en skjerm som dette:
Når du har fullført dette trinnet, har du i hovedsak lagt grunnkjernen til systemet ditt, slik at du kan gjenbruke det som du vil uten å måtte gå til Foundation-siden. Hva er kult om å ta denne tilnærmingen er at med en annen enkel kommando kan du oppdatere dette kjerne gjenbrukbare rammeverket til enten den nyeste publiserings- eller utgivelseskandidaten. For å gjøre dette, lim inn et av følgende i terminal:
sudo perle oppdatering zurb-foundation
sudo perle installasjon zurb-foundation --pre
Det er ett siste trinn med oppsett og det er å installere Compass, som gjør at vi kan lage bygg fra Foundation for bruk i våre prosjekter. Igjen kan det ta litt tid så vær tålmodig. Lim inn følgende:
sudo perle installasjon kompass
Etter installasjon bør du ha en Terminal-utgang som ser slik ut:
Nå som vi har krysset vridningen av å installere en rubin perle og holde den oppdatert, la oss sette opp et prosjekt slik at vi kan begynne å analysere denne utviklingsruten med Foundation.
Når du vil starte et nytt prosjekt, bare åpne opp terminalen og skriv "cd" (endre katalog) uten talemerker, må du enten skrive inn en bane eller lage en mappe for prosjektet ditt og dra det inn til terminal. Pass på at det er plass mellom "cd" og din sti, skjønt. Følg dette med en kommando som faktisk vil skape prosjektet ditt:
kompass lage ditt PROJECT-NAME -r zurb-foundation - å bruke foundation
Forsikre deg om at du endrer "DITT PROJEKT-NAVN" -teksten for ditt faktiske prosjektnavn og treff tilbake. Du vil da se mange mange linjer med informasjon som resulterer i et valg. Dette valget dikterer om dine Sass-filer blir konvertert til CSS-filer når du lagrer dem, eller manuelt når du velger å konvertere dem. Jeg bruker alltid det andre valget, som automatisk lager CSS-filer når jeg lagrer mine Sass-filer. Du bør se noe slikt:
Du kan se fra dette at mye har skjedd, og ditt stiftelsesbaserte prosjekt er født. Når du har valgt kompileringsmetoden din ved å bruke kompass kompilering eller kompassvisning, kan det hende du vil ta tak i koden som du kan se nederst på bildet. Dette vil bare spare deg litt tid siden den legger til utskriftstilstandsarket og normaliseres.
Herfra kan du faktisk bygge prosjektet ditt ved hjelp av Sass.
Hvis du bruker Windows, kan du fortsatt bruke Sass-versjonen av Foundation, det tar bare noen få skritt for å komme i gang. Først av, la oss få tak i Ruby. Ruby er det som tillater oss å installere denne Sass-baserte versjonen av Foundation. I motsetning til OS X, har Windows ikke dette installert som standard, så vi må få det.
Nå vil du ha den nyeste versjonen (2.0.0 ved skrivingstid) og avhengig av hvilken arkitektur du bruker, velg enten standarden for 32-biters maskiner eller x64 for 64-bits maskiner. Hvis du er usikker på hvilken, må du ganske enkelt høyreklikke "Min datamaskin" og klikk "Egenskaper" for å finne ut. Mislykkes det, gå med 32-bit.
Når du er lastet ned, kjør gjennom installasjonen. Ikke kryss / endre noe med mindre du vet hva du gjør. Etter installasjonen er fullført, gå til programmer, deretter Ruby og klikk på "Start Command Prompt with Ruby". Når du har lastet opp, kopierer du følgende kode og limer inn i ledeteksten, kan du gjøre dette ved å høyreklikke på topplinjen og gå til redigering> lim inn.
perle installasjon zurb-fundament
Du ser noe lignende til dette:
Du kan også holde Foundation oppdatert ved hjelp av enten den generelle offentlige kommandoen eller kommandoen frigjøringskandidat:
perle oppdatering zurb-foundation
perle installasjon zurb-foundation --pre
Nå som vi har grunnleggende oppsett, la oss gå videre og installere det endelige stykket, Compass. Akkurat som før kan vi installere Kompass ved hjelp av en kommando:
perleinstallasjonskompass
Vær tålmodig, dette vil resultere i en skjerm som dette:
For å faktisk opprette prosjektet ditt må du bytte til en katalog som "Desktop" og kjøre en kommando. Du kan gjøre dette ved å skrive "cd" uten talemerkene, etterfulgt av et mellomrom, etterfulgt av en bane. For å legge til banen selv kan du enten skrive inn en, eller bare dra og slipp mappen i ledeteksten.
Når du har endret katalogen, kjør denne kommandoen, og pass på at du endrer DITT PROJEKT-NAVN for ditt faktiske prosjektnavn.
kompass lage ditt PROJECT-NAME -r zurb-foundation - å bruke foundation
Og det er det! Etter dette er det ingen forskjeller mellom Windows og OS X.
Hvis du bruker OS X, er det et flott utviklingsverktøy kalt CodeKit. Denne applikasjonen minimer automatisk JS, CSS, SCSS og konverterer SCSS til CSS, noe som betyr at du kan drepe terminal og bruke CodeKit i stedet. Det tilbyr også feilutheving for både JS og SCSS, inkludert biblioteker som jQuery.
Jeg vet hva du tenker på; "Jeg har ikke OS X". Ingen bekymringer, jeg har ikke glemt deg Windows-folk - du kan ta tak i nærmeste tilsvarende program som heter Prepros.
I neste del ser vi på hva du kan gjøre med denne mer dynamiske Sass-baserte versjonen av Foundation, inkludert tilpassing av bygg, endring av standardstiler og mye mer.
Accentsconagua