Adding the Libraries #
It's time to add our three friends Bourbon, Neat, and Bitters to our project. Let's start with Bitters.
Bitters is different from Bourbon and Neat in that it's not a library - but rather a scaffold. Installing it brings us a set of basic Sass files that help kickstart our project.
Bitters also provides a couple of sensible defaults: e.g. text size is reset to "1em"; lists, forms and buttons get basics styles assigned; ...
You're encouraged to modify and customize everything that Bitters brings. Simply dig in the installed files and make your adjustments.
This is in contrast to Bourbon and Neat: since they are libraries, their code should be left unchanged. Only then will you be able to update them later when new, improved versions come out.
Before initializing Bitters in our project, we first need to create an "scss" folder in our project. Then, on the command line, we change into this new folder and install Bitters:
$ cd scss $ bitters install Bitters files installed to base/base
Let's take a look at what this left us with:
Instead of going through the files now (and just in theory), we'll have a closer look at them later when we make our adjustments.
Installing Neat & Bourbon
While we're at it, let's get the "installation" part over with. To keep things nice and clean, we create a new "lib" folder inside of our "scss" folder. On the command line, change into this folder and call the following two commands:
$ cd lib $ bourbon install Bourbon files installed to bourbon/ $ neat install Neat files installed to neat/
Now, we have the following project structure in place:
Importing All Components
Before we actually get our hands dirty with some Bourbon-and-Neat-enhanced Sass, we need to make sure that everything is available in our scripts. Create a main "styles.scss" file right in the "scss" folder with the following import rules:
/***** 3rd Party Components *****/ @import "lib/bourbon/bourbon"; @import "lib/neat/neat"; @import "base/base";
Although it adds a lot of useful default styles, Bitters does not replace a CSS reset script. Therefore, let's include the popular normalize.css, right at the top of our imports:
/***** 3rd Party Components *****/ @import "lib/normalize-css/normalize"; @import "lib/bourbon/bourbon"; @import "lib/neat/neat"; @import "base/base";
This expects to find a "_normalize.scss" file in "lib/normalize-css/".
On the command line, we can now start our Sass compiler. From the project's "www" folder, simply issue the following command:
$ sass --watch scss:css
This compiles our many Sass components into browser-readable CSS.