Compass And Sass Compilation On Wercker

Wercker is a Docker-Native CI/CD Automation platform for Kubernetes & Microservice Deployments

Micha Hernandez van Leuffen
Micha Hernandez van Leuffen
July 12, 2013

In this tutorial we will briefly discuss how to set up your sass and compass compilation steps on wercker.

Sass is a language on top of CSS enabling you to add more structure to your stylesheets. Compass is a framework that makes it easier to author your Sass stylesheets.

Wercker can not only be leveraged to run your unit tests, but also to build and compile static assets. This includes for instance the minification of javascript files or, as this article will describe, compilation of stylesheets.

image

You can find the code for this tutorial on GitHub here and view it on wercker by clicking on my build-status badge below:

Wercker status

Signing up for wercker is free and easy.

Build Steps

Each build on wercker consists of steps that you can create yourself by declaring these steps in the wercker.yml file. In this tutorial we are going to set up ourwercker.yml file to execute a compass compilation for us on Sass stylesheets.

First, make sure you have a git repo on your machine and GitHub or Bitbucket. You can fork my repo here, that already contains the code for the tutorial.

Creating your project

First, declare your dependencies in your Gemfile:

source 'https://rubygems.org'
gem 'compass'

We just need the Compass framework in our case. Next, bootstrap your compass project, by running compass create:

compass create

directory sass/
directory stylesheets/
   create config.rb
   create sass/screen.scss
   create sass/print.scss
   create sass/ie.scss
   create stylesheets/ie.css
   create stylesheets/print.css
   create stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

Compass has created several files for us, we can .gitignore the stylesheets folder and the **.sass-cache* as we will be running our compass compilation on wercker.

echo 'stylesheets/\n.sass-cache' > .gitignore

Lets do some basic editing of sass stylesheets. Open up screen.scss with your favorite editor and create some styles:

@import "compass/reset";

/* screen.scss */
#navbar {
  width: 80%;
  height: 23px;
}

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}

We now have some basic styling in place!

Adding our project to wercker

Now we’re going to set up our build pipeline on wercker. Create a file calledwercker.yml. You can read more about setting up your wercker.yml file on our dev center.

box: wercker/ubuntu12.04-ruby2.0.0
build:
  steps:
    - bundle-install
    - script:
        name: compile compass assets
        code: bundle exec compass compile

Lets go over this file. The box element tells wercker what kind of execution environment our project needs. In this case we want to have Ruby version 2.0 available. You can read more about the wercker pipeline and boxes on the werckerdev center

Next we define our build pipeline using steps. We need to install our dependencies first, so we execute the by wercker provided bundle-install step for Ruby projects. Now we create a custom step that we’ve named compile compass assets and that runs the compass compile command within the bundled environment.

Push to git

Now add your sass folder, the by compass created config.rb, the Gemfile and thewercker.yml file to git.

git add .
git commit -am 'init'
git push origin master

Add your project to wercker

Now you want to add your project to wercker. You can do so either via the web interface or through the wercker command line interface. We will use the CLI (read more on the CLI here in this example, that we can install via pip:

pip install wercker

Now run the following command in your project folder to add your application to wercker:

wercker create

The CLI will detect that you already have a git remote on GitHub or Bitbucket and use it to set up your application on wercker. It wil also trigger an initial build.

You can view your build on wercker by running:

wercker open

You will now see your compass compilation step that we added to the wercker.ymlfile.

image

As a followup, we could deploy these stylesheets to S3, for instance via the S3sync step that we’ve also described in a previous article on streamlining Jekyll andMiddleman assets.

Earn some stickers

Let us know about the applications you build with wercker. Don’t forget to tweet out a screenshot of your first green build with #wercker and we’ll send you some@wercker stickers.

Follow us on twitter as well to stay in the loop.

Sign up for wercker here