Twitter's Bootstrap is undeniably popular - and if you're a fan of CSS preprocessors you'll love the fact that it's built on LESS. Unfortunately, if you (like me) enjoy working with SASS, there typically hasn't been anything readily available to get you started. Until now. This tutorial will explain how to combine SASS, Compass, and Twitter's Bootstrap.
New Sass logo by Bermon Painter
We've covered introducing SASS and Compass for designers before on Webdesigntuts+, so feel free to take a look at that if you need a beginner's guide.
Step 1: The Dreaded Downloads
To start with, we're going to need to download a few assets. You will also need your favorite text editor; I use WebStorm from JetBrains, but you're free to use whatever you prefer.
Head on over to rubyinstaller.org so we can grab Ruby, and press the big red download button. On that Downloads page, go ahead and click on the current Rails link. The version I am using today is : rubyinstaller-1.9.3-p286
Once that starts downloading, we'll need to go and grab a live reloader. On a Windows machine, head on over to Scout; my live reloader of choice, Mac users will more likely use LiveReload.
Next task is grabbing a great SASS edition of Twitter's Bootstrap-SASS from GitHub: just click on ZIP.. (I can't thank Thomas McDonald enough for this conversion from LESS.)
Okay, that's it for downloading.
Step 2: Installing the Mania
Go ahead and install Ruby installer and Scout.
Now create a temporary folder and extract the Bootstrap-Sass zip into it:
Next, we need to head into our Command Prompt window to set up our project. Go ahead and type in gem install compass at the C:\ prompt.
This will install compass onto your machine. Just wait a couple minutes to finish (maybe grab a coffee). Once it is done, go ahead and close out your command prompt.
Head on over to the directory where you want to place your new project, then Shift+Right Click (on Windows) on that folder. Then pick Open Command Window Here. Once that is open, type in compass create YourProjectName. You can also navigate to your project directly via the command prompt - check out A Designer’s Introduction to the Command Line for more details on traversing directories.
That's it for creating your Compass/Sass project.
Step 3: Implementing Your Soul
You remember when you created that temporary folder? Now it's time to go grab Bootstrap to throw into it.
Head on over 'YourTempFolder\thomas-mcdonald-bootstrap-sass-dabed1e\vendor\assets'. There, you will copy the contents of the Assets folder and paste into your project folder. Just go ahead and delete ie, screen, and print.scss in your Sass folder.
Your project folder should look something like this:
You will now have a Bootstrap project set up with all the SCSS goodies. Now to pick up your html to start with, I'm going to use fluid.html from the html templates at Twitter's Bootstrap Website.
While on the website, view the source, then copy it (a pretty easy way of getting hold of some basic Bootstrap markup). Then, fire up your text editor, make a new file and name it index.html. Go ahead and paste the HTML contents from Twitter's Bootstrap HTML template.
Once that is finished, go ahead and edit the html to point all references to your file structure, ie... href="../assets/ico/favicon.ico" to href="images/favicon.ico".
And don't forget to set your stylesheet reference to "stylesheets/style.css"! You will also need to change jquery.js to bootstrap.js. Take your time and straighten out the HTML references to match your project paths.
Create a file named style.scss in your Sass folder, so Scout knows what to look for. Fire Scout up! Scout should look like this once you hit its play button.
It will create and update your css automatically, effectively behaving like the 'compass watch' command.
Get your style.scss opened up in your text editor, you need to add two import rules: @import 'bootstrap'; and @import 'bootstrap-responsive';. Save it!
Congratulations, you now have a working and very modifiable Bootstrap and Sass site!
Note: The mixins and variables can all be changed easily by going into /bootstrap/_mixins.scss and /bootstrap/_variables.scss respectively.
Conclusion
The power of Bootstrap and Sass can not be denied; use this power wisely! For any reference to using Twitter's bootstrap, check out our Bootstrap 101 series or go to Twitter's Bootstrap Website, and fork Thomas McDonald's project on GitHub. If nothing else, send him a quick thank you!
Resources
Here are the links again, plus a couple of additional learning resources.
