Skip to content

Compass with SASS for Team Development

By GRAYBOX Alumni
Technology

As a front-end developer, there are many go-to applications and workflows that have become common in our digital tool chests. Easily my favorite and most valuable tool is SASS.

This post will be diving into a setup of SASS for a team of developers so I'll do a quick overview on what SASS is before I get into the more advanced setup of the SASS solution for teams that we here at GRAYBOX are incorporating into our workflows.

What is SASS?

First of all, SASS stands for "Syntactically Awesome StyleSheets". Yes, you read that right…there's an "Awesome" in the acronym and it's entirely appropriate.

Here's the most succinct definition of what SASS is and this comes directly from the makers of this magical compiler.

"Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library." - SASS-Lang.com

Working solo is easy and there are many SASS compilers whether you prefer command line use or a GUI solution. I've worked with a few GUI's but my favorite (as referred to in my past blog post) is CodeKit which is far and away my go-to GUI compiler for all things SASS.

The Team-SASS Challenge

The challenge with GUIs and working solo is that it works great when you are coding by yourself. The challenge comes when you work in a team via a git repo and not everyone has a Mac or PC and/or your favorite GUI app. In the case of CodeKit, it's a Mac-only application so when I'm working with a contractor, I have to make some assumptions that aren't always true. Do they have a Mac? Do they want to invest in my preferred application for a rare update?

In the case of CodeKit, the application (and many like it) create a unique configuration file that manages the compiler. It's great for one user to customize the target/source files but problems arise when trying to share access amongst developers to make minor changes to a site's stylesheets.

Enter Compass (http://compass-style.org), our preferred method to configure our SASS compiling. Compass gives you one config file that, if setup correctly, will make it easy to collaborate on without breaking things. (Note: CodeKit does offer Compass configuration but I've found it easier to setup via command-line as explained below.)

Here is our method for starting a new SASS/Compass project and one that we've found to work well for our team.

First of all, before I start with our step-by-step setup, you'll need to make sure you have the following installed to follow my steps.

  1. Bower (http://bower.io) - a package manager for the web
  2. Compass (http://compass-style.org) - Compass requires a ruby environment. Visit their website for instructions on setup.

For the instructions below, I'll be working with Apple OS X. If you are on a PC or LINUX, the steps should be similar but the actual implementation may differ.

The GRAYBOX Process (Compass/SASS/Bootstrap)

  1. Setup/clone the git repository for your new project to your local machine.
  2. Open your command-line application (Terminal on a Mac) and navigate to your just-cloned folder on your local machine.
  3. Install your framework (Bootstrap 3 for this example)

    bower install bootstrap-sass-official

  4. Create a Compass project in your web folder. At the terminal command, navigate to the web root folder (ex: "public_html") and then create/setup your compass project. Because we prefer to keep our assets (css/js/images/sass) all contained in one folder called "assets", this is a good location to create your new compass project.

    compass create assets

  5. The default compass install adds files we won't need for our framework so you can now delete the folder called "stylesheets" and remove all the files in the newly-generated "sass" folder.
  6. Now comes the cool part…customizing your compass file to allow you to pull your framework files as well as your custom sass files. Navigate to your assets folder and open the newly created file called config.rb. Assuming your file structure looks like this...
Sass finder

...customize your config.rb with the following.

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
add_import_path = "../../bower_components/bootstrap-sass-official/"
  1. Next, create a new file in your assets/sass folder called "style-custom.scss" (or whatever you prefer). I like adding "-custom" to my style name so I can compare it later to the original framework styling if I need to debug.
  2. Next, create a subfolder in your sass folder titled "custom". This will contain two of the most used files in your custom sass/framework setup.
  3. In the sass/custom folder, add a blank file called "_app.scss". This will be your custom sass file where you will do all your custom stylesheet work.
  4. Using your file manager, copy/paste the file called _variables.scss from the folder "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap" and paste a copy into your newly created assets/custom folder.
  5. Navigate to bower_components/bootstrap-sass-official/assets/stylesheets and open the _bootstrap.scss file. Add "//" (comment-out line) before the line referencing the variables.css file since we're going to be using our own custom variables file in our custom folder.
Example:
// @import "bootstrap/variables";

  1. Open the style-custom.scss file contained in your assets/sass folder and copy/paste the following and then save the file. 

// Custom variables 
@import "custom/variables";
// Core variables and mixins 
@import "../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap.scss";
// Custom classes 
@import "custom/app"

  1. Let's now fire up compass and check to make sure it's compiling the right code. Open your terminal/command-line application and navigate to your assets folder (the folder that contains the config.rb file). Once there, enter the following to start compass.

    compass watch

    You should see a message along the lines of "Compass is watching...". If you see any error messages, it's likely a result of an incorrect file path or a misspelled file name. Double check your config.rb file or your style-custom.scss to find the problem.

Final Thoughts:

I recognize there may be a good GUI solution for this but I've found for our situation, with multiple developers on different platforms, the command-line setup works most consistently. There are lots of configuration options for Compass that you can check out here to handle any custom file structures you may have. This is by no means the only solution and there are many ways you can accomplish this but I've found this method to work best with our workflows.

If you have any comments, questions or suggestions, please feel free to leave us a note in the comment section.

Resources

Git Options

Blog & Events

Featured Work