Set up Sass in WordPress

For this tutorial, you will learn how to use Sass in WordPress in Vagrant. The Vagrant box I’ll be using is called VVV (Varying Vagrant Vagrants). VVV is optimized for WordPress. At the end, you’ll be using Sass with WordPress inside of Vagrant like a pro!

Installing Sass into Vagrant (VVV)

At this point, unless you already have a local WordPress development with Vagrant, you are probably very confused. Take a look at this tutorial for setting up a local WordPress development environment using Vagrant, and come back here afterwards. You will be very glad you did! Check out this tutorial on using Sass with Compass and WordPress if you are not looking to use them in Vagrant.

With VVV set up and your WordPress installation inside of it, you can now install Sass into Vagrant. To do that, you will provision Vagrant with Sass and Compass. Compass isn’t necessary, but it is very helpful.
Open up your Finder and go to your installation of VVV and open the folder called provision that is inside of it. If you followed my last tutorial, the path would be ~/vagrant-local/provision. Inside of that folder, create a file called provision-pre.sh and add the following code to it.

# sass install
sass_install="$(gem list sass -i)"
if [ "$sass_install" = true ]; then
  echo "sass installed"
else
  echo "sass not installed"
  gem install sass

  sass_path="$(gem which sass | sed -s 's/.rb/\/deployer\/base.rb/')"
  if [  "$(grep yaml $sass_path)" ]; then


    echo "can require yaml"
  else
    echo "can't require yaml"
    echo "set require yaml"

    sed -i "7i require\ \'yaml\'" $sass_path

    echo "can require yaml"

  fi
fi

# compass install
compass_install="$(gem list compass -i)"
if [ "$compass_install" = true ]; then
  echo "compass installed"
else
  echo "compass not installed"
  gem install compass

  compass_path="$(gem which compass | sed -s 's/.rb/\/deployer\/base.rb/')"
  if [  "$(grep yaml $compass_path)" ]; then


    echo "can require yaml"
  else
    echo "can't require yaml"
    echo "set require yaml"

    sed -i "7i require\ \'yaml\'" $compass_path

    echo "can require yaml"

  fi
fi

To activate the previous code, open up your terminal and navigate to the folder where you installed VVV (cd ~/vagrant-local). Now run vagrant provision. This will install Sass and Compass into VVV. If you ever have to destroy your VVV Vagrant box, all you have to do to set up another VVV box with sass and compass is copy the contents of provision-pre.sh to your new installation and run vagrant provision.

Set Up Your WordPress Theme for Sass

I am using the Genesis framework for WordPress, but the steps are the same if you’re not using Genesis. Open your Finder and navigate to the theme inside of your installation of WordPress (~/vagrant-local/your-wp-install/htdocs/wp-content/themes/your-theme). Create a file called config.rb inside of your theme directory (your-theme/config.rb) and add the following to it.

http_path = "/" #root level target path
css_dir = "." #targets our default style.css file at the root level of our theme
sass_dir = "sass" #targets our sass directory
images_dir = "img" #targets our pre existing image directory
javascripts_dir = "js" #targets our JavaScript directory
 
# You can select your preferred output style here (can be overridden via the command line):
output_style = :nested
# output_style = :expanded or :nested or :compact or :compressed
 
# To enable relative paths to assets via compass helper functions.
# note: this is important in wordpress themes for sprites
 
relative_assets = true
preferred_syntax = :scss

Also in your theme folder, create a folder called sass and a file called style.scss.

Now, open up your terminal, and run the following.
cd ~/vagrant-local (to navigate to your VVV installation)
vagrant ssh to enter VVV
cd /srv/www/your-wp-install/htdocs/wp-content/themes/your-theme to navigate to your WordPress theme.
compass watch --poll to start watching style.scss inside of your sass folder. Note that just running compass watch will not work, for some reason. The –poll tag has to added.
Running this command in your terminal will start a process in the terminal and say something like “Compass is watching for changes. Press Ctrl-C to Stop.” If you’ve gotten this far, keep going! If not, take a nice break and come back later.

Now, go ahead and add some CSS to sass/style.scss and save it. You should see some action happening in your terminal. Open up your-theme/style.css and take a look. If Compass copied the sass from sass/style.scss to your-theme/style.css, then you did it! Go and be productive! Congratulations! Feel accomplished!