Share
Twitter Bootstrap är otänkbart populär - och om du är en fan av CSS preprocessorer kommer du att älska det faktum att den är byggd på LESS. Tyvärr, om du (som jag) tycker om att arbeta med SASS, har det vanligtvis inte varit något tillgängligt för att komma igång. Tills nu. Denna handledning kommer att förklara hur man kombinerar SASS, Compass och Twitter Bootstrap.
Ny Sass-logotyp av Bermon Painter
Till att börja med måste vi ladda ner några tillgångar. Du behöver också din favorit textredigerare; Jag använder WebStorm från JetBrains, men du är fri att använda vad du föredrar.
Gå vidare till rubyinstaller.org så att vi kan ta tag i Ruby, och tryck på den stora röda nedladdningsknappen. På den sidan över nedladdningar, fortsätt och klicka på den aktuella Rails länken. Den version jag använder idag är: rubyinstaller-1.9.3-p286
När det börjar ladda ner måste vi ta en live reloader. På en Windows-maskin, gå vidare till Scout; min levande reloader, Mac-användare kommer sannolikt att använda LiveReload.
Nästa uppgift är att fånga en stor SASS-utgåva av Twitter Bootstrap-SASS från GitHub: klicka bara på ZIP ... (jag kan inte tacka Thomas McDonald nog för den här konverteringen från MINDRE.)
Okej, det är det för nedladdning.
Gå vidare och installera Ruby installer och Scout.
Skapa nu en tillfällig mapp och extrahera Bootstrap-Sass zip i den:
Därefter måste vi gå in i vårt kommandopromptfönster för att skapa vårt projekt. Gå vidare och skriv in gem installation kompass vid C: \ -prompten.
Detta kommer att installera kompass på din maskin. Vänta bara ett par minuter för att avsluta (kanske ta en kaffe). När det är klart, fortsätt och avsluta kommandotolken.
Gå vidare till katalogen där du vill placera ditt nya projekt, sedan Skift + Högerklicka (på Windows) i den mappen. Välj sedan Open Command Window här. När det är öppet, skriv in kompass skapa YourProjectName. Du kan även navigera till ditt projekt direkt via kommandotolken - kolla in en designerens introduktion till kommandoraden för mer information om att gå igenom kataloger.
Det är det för att skapa ditt Compass / Sass-projekt.
Kommer du ihåg när du skapade den tillfälliga mappen? Nu är det dags att ta tag i Bootstrap för att kasta in den.
Huvud på "YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets". Där ska du kopiera innehållet i mappen Tillgångar och klistra in i projektmappen. Bara fortsätt och ta bort ie, skärm och print.scss i din Sass-mapp.
Din projektmapp ska se ut så här:
Du kommer nu att ha ett Bootstrap-projekt som sätts upp med alla SCSS-godsakerna. Nu för att hämta din html till att börja med ska jag använda fluid.html från html-mallarna på Twitter Bootstrap-webbplatsen.
På webbplatsen, se källan och kopiera den (ett ganska enkelt sätt att få tag på några grundläggande Bootstrap-markup). Slå sedan upp din textredigerare, skapa en ny fil och namnge den index.html. Fortsätt och klistra in HTML-innehållet från Twitter: s Bootstrap HTML-mall.
När det är klart, fortsätt och redigera html för att peka alla referenser till din filstruktur, dvs ... href = "... /assets/ico/favicon.ico" to href = "images / favicon.ico".
Och glöm inte att ställa in din stylesheet-referens till "stylesheets / style.css"! Du måste också ändra jquery.js till bootstrap.js. Ta din tid och räkna ut HTML-referenserna för att matcha dina projektvägar.
Skapa en fil med namnet style.scss i din Sass-mapp, så Scout vet vad du ska leta efter. Fire Scout upp! Scout ska se ut så här när du slår på sin avspelningsknapp.
Det kommer att skapa och uppdatera din css automatiskt och fungera effektivt som "kompass watch" -kommandot.
Få din style.scss öppnas i din textredigerare måste du lägga till två importregler: @import "bootstrap"; och @import "bootstrap-responsive";. Spara den!
Grattis, du har nu en fungerande och mycket modifierbar Bootstrap och Sass-webbplats!
Notera: Mixins och variabler kan alla ändras enkelt genom att gå in i /bootstrap/_mixins.scss respektive /bootstrap/_variables.scss.
Kraften hos Bootstrap och Sass kan inte nekas; använd den här kraften klokt! För någon hänvisning till användandet av Twitters bootstrap, kolla in vår Bootstrap 101-serie eller gå till Twitters Bootstrap-webbplats och gaffel Thomas McDonalds projekt på GitHub. Om inget annat, skicka honom ett snabbt tack!
Här är länkarna igen, plus ett par extra inlärningsresurser.
Accentsconagua