Advertisement
Workflow

Quick Tip: Working with SASS and Bootstrap

by

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.

Related Posts
  • Web Design
    eCommerce
    An Overview of My Shopify Workflow ToolsShopify thumb
    Following the publication of the recent Shopify Theme Series I have had a few people get in touch and ask me about some of the workflow tools I use when building themes. Let's look at just a few of them.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Code
    Tools & Tips
    Working With LESS and the Chrome DevToolsLess devtools retina preview
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.Read More…
  • Web Design
    HTML/CSS
    Setting up Foundation With Sass and CompassFoundation sass retina
    Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…
  • Web Design
    HTML/CSS
    Stir up Your Own Delicious Sass MixinsMix preview
    Sass is designed to help write CSS faster; mixins are of the features that make it possible. Several heavyweight libraries exist with complex formulas for every situation, but today I’m going to show how to stir up your own mixins that complement existing workflows.Read More…