This post is a follow-on from How to Use Capistrano 3 for Ghost Theme Deployment, so please read that first.

The aim of this post is to introduce SASS to the workflow instead of vanilla CSS.

I followed this excellent blog post here but I will describe what specific changes I made to my local project.

First off, as the post points out, you need to install the SASS gem both to your local machine and your production server.

gem install sass

When installing on production, the main thing to watch out for is to install it as the deploy_user and not root.

The problem I had is that my specific deploy user didn't have permission to write to the location where rbenv installs its gems so if you are using rbenv or rvm then that is something to watch out for.

I simply did

sudo gem install sass

and that solved the problem.

The next thing was to follow the steps from the blog post to create the .scss files and also untracking the existing screen.css and deleting the local copy once we have everything we need in the sass stylesheets.

The problem we will have now is that git doesn't track empty directories so we will need to update the deploy.rb to create the assets/css directory when we deploy.

To build it locally if you are doing local development you can do the following from your theme root directory:

sass assets/sass/input.scss:assets/css/screen.css --style compressed

You can add the --watch option to continually monitor for changes.

We then need to update the .gitignore file so that .css and .map files can't accidentally be committed:

Capfile
config/
.sass-cache/
*.css
*.map

The last thing to do is then update the execute statements in deploy.rb

# symlink REVISION file
execute 'sudo ln -sf /var/www/path_to_ghost_install/content/themes/theme_name/current/REVISION /var/www/path_to_ghost_install/content/themes/theme_name/REVISION'
  
 # create css directory for our compiled stylesheet to go in
execute 'sudo mkdir /var/www/path_to_ghost_install/content/themes/theme_name/current/assets/css'
  
# symlink all the files from the current release to the theme root
execute 'sudo ln -sf /var/www/path_to_ghost_install/content/themes/theme_name/current/* /var/www/path_to_ghost_install/content/themes/theme_name'
  
# chown everything to be owned by our ghost user and not the deploy user
execute 'sudo chown -R ghost_user:ghost_user /var/www/path_to_ghost_install/content/themes/theme_name'
  
# compile the css stylesheet from our sass files
execute 'sudo sass /var/www/path_to_ghost_install/content/themes/theme_name/current/assets/sass/input.scss:/var/www/path_to_ghost_install/content/themes/theme_name/current/assets/css/screen.css --style compressed'
  
# restart the forever process
execute 'sudo forever restart /var/www/path_to_ghost_install/index.js'

Don't forget to push your changes to your git repo before deploying.