Setting up a Compass project

One of the biggest time savers Compass offers when you begin using it is when setting up a Sass project. While Sass saves time with the watch command, we still need to create the overall project folder and the directory for our Sass files and Sass files themselves. "That's unacceptable!" I hear you cry. "Manually create our own files and folders?! The nerve!" Thankfully, Compass can ease our pitiful plight with a single command from the command line.

Open your command line and cd into the mastering-sass folder. Within this folder you should have the ch02 folder with the code from the last chapter. What we want to do now is create a new folder called ch03. However, we also want to create a scss folder inside that, inside which we'll create our scss files, which will then need to be compiled into .css files in our css folder. That sounds like a bunch of stuff preventing me from doing some actually important (and dare I say fun) work.

Let's take a look at a faster and better way. In your command line, type the following:

compass help

No, this isn't the faster and better way, but it will show us how to get there. The compass help command will show the commands Compass can run, and one of them is compass create.

The description for create says it will Create a new compass project. That's the command we're looking for. So in the command line we'll type the following command:

compass create ch03

This will create our ch03 folder and also automatically create our sass folder, a stylesheets folder for our CSS, and some files to get us started. This is a good start; however, I'm not too happy with the default structure. I much prefer to have my CSS, images, and JavaScript folders together in a folder called assets, and I'd like to rename stylesheets to css, because I much prefer the shortest possible names for my folders. Furthermore, I'd like my sass to be in a separate folder outside of the assets folder, so when I deploy to production I can easily leave the sass files and folders behind.

You'll notice Compass also created a file called config.rb directly inside our ch03 folder. If you open this file in your text editor you should see the following:

// mastering-sass/ch03/config.rb 
require 'compass/import-once/activate' 
# Require any additional compass plugins here. 
 
# Set this to the root of your project when deployed: 
http_path = "/" 
css_dir = "stylesheets" 
sass_dir = "sass" 
images_dir = "images" 
javascripts_dir = "javascripts" 

There are more options in the config.rb file that are commented out, but for now these are the only options that we are interested in. As you can see, stylesheets and sass are the directories that Compass created for us inside of the project folder ch03.

The way I see most people configure their Compass projects in the beginning is to simply run the create command as we have and then open this file and change everything and then rename their folders and move things around. I don't know about you but the thought of that makes me cringe. What's the point in letting Compass create the folder for you at all, then?

So let's try and learn a little bit more about the Compass create command to see if we can configure it to do what we want. Back in the command line, type the following:

compass help create

This will bring up the specific help documentation for the create command in our command line.

We can see there are options for the directories here. So we can tell Compass exactly where we want our folders and what we want to call them.

Tip

Keep in mind that your config.rb file will always be created within the root of your project and all folders should be defined to be relative to that location. In our case, ch03 is the project root, and config.rb will be created directly inside the ch03 folder.

We can also specify what syntax we prefer from the start, such as the original indented sass syntax. We can specify if we want line comments and what output style we want our CSS to be in. For now, we'll focus on our folder structure. We can set the other option from within the config.rb file. It's really just the folder structure that needs to be done exactly as we want it from the start (and setting the indented Sass syntax as way if you want to use that).

First, we need to delete the ch03 folder completely. You can do this from Explorer/Finder or from the command line. I'll leave that up to you. Once that's done, we'll make sure we are in the mastering-sass folder in the command line and we'll type the following command:

compass create ch03 --sass-dir=scss --css-dir=assets/css --javascripts-dir=assets/js --images-dir=assets/img --fonts-dir=assets/css/fonts

Now, if we look inside our ch03, folder we'll see the correct folders have been created. If you open the config.rb again in your text editor, you'll see the options have also been created here matching the command-line options we specified. Now we're ready to start exploring what Compass is really made of.