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
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.
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!