Back to top

Using Sass & Compass to remotely manage CSS in Drupal themes

At INsReady Inc., we have been practising the theming workflow below for more than a year. Therefore, it's good to write down the documentation for sharing and future training purposes.

Background information: for Drupal theming, we do the development work on a dev server (see Building Nginx (Microcaching) + MariaDB/MySQL + PHP-FPM + Debian 6 + APC + Memcache + Drupal 7 server), instead of theming on a local laptop. In other words, we only edit the CSS/Sass files locally, and upload them to a remote server for previewing. I know many people have their own different workflows. But, having a central dev server for theming is great for us; because once you use a base theme like Zen, MOST of Drupal theming work is probably within two files: custom CSS/SASS file and custom jQuery file. So, theming on one server is easier for development, collaboration among themers (other people can test on many screens as well as many browsers) and collaboration with clients (they can see the staged changes right away). If you are wondering how this method could connect with the rest of Dev/Staging/Production infrastructure (and even with mobile development), then please find me at a Drupal meetup or Drupal Happy Hour event.

Anyway, some people will have the method of Drupal theming similar to us, therefore, I hope the documentation below is useful.

  1. You should already know Sass and Compass, or at least you are going to try it out, following this blog. So, let's simply install them. First, install Ruby:

    sudo aptitude install ruby-full rubygems1.8

  2. Install Sass and Compass

    sudo gem install sass
    sudo gem install compass

  3. Install two new gems – the Net::SSH and Net::SFTP gems for pushing changes to the remote server

    sudo gem install net-ssh
    sudo gem install net-sftp

  4. Create a Compass project and using the configuration file attached

    compass create test
    cd test
    rm config.rb sass/* stylesheets -r # Remove the standard files. Your sub-theme will contain all other files you need.
    # Download our config.rb file (which will have the ability to push changes to the remote server) to the folder

  5. Edit the downloaded config.rb file, fill the section below with your server login information

    # SFTP Connection Details - Does not support alternate ports os SSHKeys, but could with mods
    remote_theme_dir_absolute = '/srv/www/insready.com/public_html/sites/all/themes/sub-theme/css' # Put your Drupal sub theme CSS folder path here
    sftp_host = 'example.com' # Can be an IP
    sftp_user = 'username' # SFTP Username

    Please notice that we don't have sftp_pass => 'password' in this file; It is because we use SSH Key authentication. If you need to use password authentication, you can add

    sftp_pass => 'password' # SFTP Password

    then change the next line to

    Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass ) do |sftp|

  6. All you have to manage locally on your laptop is the configuration file config.rb and a custom Sass file such as custom.scss. Any change you make to the custom.scss will be compiled first as custom.css, then automatically upload to your remote site's sub-theme folder. Now, start working

    Compass watch
    # Save the change .... then refresh your browser to see the effect

*Please notice that the configuration ONLY push the change after the compilation, which means the custom.css file, to the remote server. Therefore, you need once a while to upload the original custom.scss file to your remote sub theme folder and you should do so everyday after you done working just like committing the code to a repository. (If anyone has an idea to automate this part of the process, please share with us.)

Files: 

Comments

Some Errors

Comment: 

Net::SFTP.start( sftp_host, sftp_user, :password =sftp_pass ) do |sftp|

This line should be : Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass ) do |sftp|

Add new comment