Share
Twitter Bootstrap er utvilsomt populært - og hvis du er en fan av CSS preprocessors, vil du elske det faktum at den er bygget på MINDRE. Dessverre, hvis du (som meg) liker å jobbe med SASS, har det vanligvis ikke vært noe lett tilgjengelig for å komme i gang. Inntil nå. Denne opplæringen vil forklare hvordan du kombinerer SASS, Compass og Twitter Bootstrap.
Ny Sass logo av Bermon Painter
Til å begynne med må vi laste ned noen få eiendeler. Du vil også trenge din favoritt tekstredigerer; Jeg bruker WebStorm fra JetBrains, men du er fri til å bruke det du foretrekker.
Gå videre til rubyinstaller.org slik at vi kan ta Ruby, og trykk på den store, røde nedlastningsknappen. På siden Nedlastinger, fortsett og klikk på den nåværende Rails-lenken. Den versjonen jeg bruker i dag er: rubyinstaller-1.9.3-p286
Når det begynner å laste ned, må vi gå og ta en live reloader. På en Windows-maskin, hodet på over til Scout; Min levende reloader, Mac-brukere vil sannsynligvis bruke LiveReload.
Neste oppgave er å fange en flott SASS-utgave av Twitter's Bootstrap-SASS fra GitHub: Bare klikk på ZIP ... (jeg kan ikke takke Thomas McDonald nok for denne konverteringen fra MINDRE.)
Ok, det er det for nedlasting.
Gå videre og installer Ruby installer og Scout.
Lag nå en midlertidig mappe og pakk Bootstrap-Sass zip inn i den:
Deretter må vi hodet inn i vårt kommandopromptvindu for å sette opp vårt prosjekt. Gå videre og skriv inn perleinstallasjonskompass på C: \ prompt.
Dette vil installere kompass på maskinen din. Bare vent et par minutter til slutt (kanskje ta en kaffe). Når det er gjort, gå videre og lukk ut ledeteksten din.
Gå videre til katalogen hvor du vil plassere det nye prosjektet, deretter Shift + Høyreklikk (på Windows) på den mappen. Deretter velger du Open Command Window Her. Når det er åpent, skriv inn kompass opprette YourProjectName. Du kan også navigere til prosjektet ditt direkte via kommandoprompten - sjekk ut en designers introduksjon til kommandolinjen for mer informasjon om å krysse kataloger.
Det er det for å lage ditt Compass / Sass prosjekt.
Husker du når du opprettet den midlertidige mappen? Nå er det på tide å ta tak i Bootstrap for å kaste inn i den.
Hodet over 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets'. Der vil du kopiere innholdet i Assets-mappen og lime inn i prosjektmappen din. Bare fortsett og slett ie, skjerm og print.scss i Sass-mappen din.
Prosjektmappen din bør se slik ut:
Du vil nå ha et Bootstrap-prosjekt satt opp med alle SCSS-godbiter. Nå for å hente html til å begynne med, skal jeg bruke fluid.html fra html-maler på Twitters Bootstrap-nettsted.
Mens du er på nettstedet, kan du se kilden, og deretter kopiere den (en ganske enkel måte å få tak i noen grunnleggende Bootstrap-markup). Deretter brann opp tekstredigeringsprogrammet, lage en ny fil og gi den navnet index.html. Gå videre og lim inn HTML-innholdet fra Twitter's Bootstrap HTML-mal.
Når det er ferdig, gå videre og rediger html for å peke alle referanser til filstrukturen din, det vil si ... href = "... /assets/ico/favicon.ico" to href = "images / favicon.ico".
Og ikke glem å sette stilark referansen til "stylesheets / style.css"! Du må også endre jquery.js til bootstrap.js. Ta deg tid og rett ut HTML-referansene for å matche prosjektbanene dine.
Opprett en fil med navnet style.scss i Sass-mappen din, så Scout vet hva du skal se etter. Fire Scout opp! Scout skal se slik ut når du treffer spillknappen sin.
Det vil opprette og oppdatere css automatisk, effektivt oppfører seg som kompass watch-kommandoen.
Få din style.scss åpnet opp i teksteditoren din, må du legge til to importregler: @import 'bootstrap'; og @import 'bootstrap-responsive';. Lagre det!
Gratulerer, du har nå et fungerende og veldig modifiserbart Bootstrap og Sass-nettsted!
Merk: Mixins og variabler kan alle endres enkelt ved å gå inn i /bootstrap/_mixins.scss og /bootstrap/_variables.scss henholdsvis.
Kraften til Bootstrap og Sass kan ikke nektes; bruk denne kraften klokt! For noen henvisning til bruk av Twitter's bootstrap, sjekk ut Bootstrap 101-serien eller gå til Twitters Bootstrap-nettsted, og gaffel Thomas McDonalds prosjekt på GitHub. Hvis ikke noe annet, send ham en rask takk!
Her er linkene igjen, pluss et par ekstra læringsressurser.
Accentsconagua