Share
De Bootstrap van Twitter is onmiskenbaar populair - en als je fan bent van CSS-preprocessors, zul je dol zijn op het feit dat het op LESS is gebouwd. Helaas, als u (net als ik) graag met SASS werkt, is er meestal niets direct beschikbaar om u op weg te helpen. Tot nu. Deze tutorial legt uit hoe je de Bootstrap van SASS, Compass en Twitter kunt combineren.
Nieuw Sass-logo van Bermon Painter
Om te beginnen moeten we een paar activa downloaden. Je hebt ook je favoriete teksteditor nodig; Ik gebruik WebStorm van JetBrains, maar je mag alles gebruiken wat je wilt.
Ga naar rubyinstaller.org zodat we Ruby kunnen pakken en op de grote rode downloadknop kunnen drukken. Ga op die downloadpagina door en klik op de huidige Rails-link. De versie die ik vandaag gebruik is: rubyinstaller-1.9.3-p286
Zodra dat is begonnen met downloaden, moeten we een live-reloader pakken. Ga op een Windows-computer naar Scout; mijn live-reloader naar keuze, Mac-gebruikers zullen waarschijnlijk LiveReload gebruiken.
De volgende taak is het grijpen van een geweldige SASS-editie van Twitter's Bootstrap-SASS vanuit GitHub: klik gewoon op ZIP ... (Ik kan Thomas McDonald niet genoeg bedanken voor deze conversie van LESS.)
Oké, dat is het voor het downloaden.
Ga je gang en installeer Ruby Installer en Scout.
Maak nu een tijdelijke map en pak de Bootstrap-Sass-zip erin:
Vervolgens gaan we naar ons opdrachtpromptvenster om ons project in te stellen. Ga je gang en typ in gem installeer kompas op de C: \ prompt.
Dit zal kompas op uw machine installeren. Wacht een paar minuten om het af te maken (misschien een kopje koffie pakken). Als het klaar is, ga je gang en sluit je opdrachtprompt.
Ga naar de map waar je je nieuwe project wilt plaatsen en houd Shift + Right Click (in Windows) in die map. Kies vervolgens hier Open Commando-venster. Als dat eenmaal is geopend, typt u kompas creëer YourProjectName. U kunt ook rechtstreeks naar uw project navigeren via de opdrachtprompt - bekijk A Designer's Introduction to the Command Line voor meer informatie over het doorlopen van mappen.
Dat is het voor het maken van uw Compass / Sass-project.
Weet je nog dat je die tijdelijke map hebt gemaakt? Nu is het tijd om Bootstrap te grijpen om erin te gooien.
Ga naar 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets'. Daar kopieert u de inhoud van de map Assets en plakt u deze in uw projectmap. Ga gewoon door en verwijder ie, screen en print.scss in uw Sass-map.
Uw projectmap zou er ongeveer zo uit moeten zien:
Je hebt nu een Bootstrap-project opgezet met alle SCSS-goodies. Om nu je html op te halen, ga ik fluid.html gebruiken van de html-sjablonen op Twitter's Bootstrap Website.
Terwijl u op de website bent, bekijkt u de bron en kopieert u deze (een vrij eenvoudige manier om een paar basis Bootstrap-markeringen te bemachtigen). Vuur vervolgens je teksteditor aan, maak een nieuw bestand en noem het index.html. Ga je gang en plak de HTML-inhoud van Twitter's Bootstrap HTML-sjabloon.
Als dat klaar is, ga je gang en bewerk je de html om alle verwijzingen naar je bestandsstructuur te richten, dat wil zeggen ... href = "... /assets/ico/favicon.ico" naar href = "images / favicon.ico".
En vergeet niet om uw stijlbladreferentie in te stellen op "stylesheets / style.css"! U moet ook jquery.js wijzigen in bootstrap.js. Neem de tijd en plaats de HTML-verwijzingen recht naar uw projectpaden.
Maak een bestand met de naam style.scss in uw Sass-map, zodat Scout weet waarnaar moet worden gezocht. Fire Scout up! Scout zou er zo uit moeten zien als je op de play-knop slaat.
Het zal je css automatisch aanmaken en bijwerken, en zich effectief gedragen als het commando 'compass watch'.
Haal je style.scss geopend in uw teksteditor, moet u twee importregels toevoegen: @import 'bootstrap'; en @import 'bootstrap-responsive';. Bewaar het!
Gefeliciteerd, je hebt nu een werkende en zeer aanpasbare Bootstrap- en Sass-site!
Notitie: De mixins en variabelen kunnen allemaal eenvoudig worden gewijzigd door respectievelijk in /bootstrap/_mixins.scss en /bootstrap/_variables.scss te gaan.
De kracht van Bootstrap en Sass kan niet worden ontzegd; gebruik deze kracht verstandig! Voor elke verwijzing naar het gebruik van de bootstrap van Twitter, bekijk onze Bootstrap 101-serie of ga naar Twitter's Bootstrap Website en vork het Thomas McDonald's project op GitHub. Stuur hem alsjeblieft snel een bedankje!
Hier zijn de links opnieuw, plus een aantal aanvullende leermiddelen.
Accentsconagua