Up until recently, I’ve been using LESS as my CSS preprocessor. When I first became aware of the existence of CSS preprocessors, I was trying to find one that would suit be best.
At the time, LESS seemed the best fit as I could compile my stylesheets in the browser with JavaScript, on the server with PHP or a WordPress plugin, or using one of many GUI applications which watched a folder for changes to my LESS files. I was also put off by the need to install Ruby to use Compass.
One day I decided to make the plunge and see what Sass really had to offer. I’ve come to love the powerful features of Sass and Compass, and I’m not looking back.
Installing Ruby
It’s not hard at all to install Ruby on Windows. All you need to do is visit the Ruby Installer website and grab the latest version of the installer. Download the file to your system and execute it.
Remember to check “Add Ruby executables to your PATH”, otherwise you won’t be able to run Ruby from command prompt.
Installing Compass
Open your preferred terminal; Git Bash and Windows Command Prompt both work fine. Run the following command:
gem install compass
This will download Compass and its required dependencies, including Sass.
Using Compass
Now you have Compass installed, you can create and compile your own Compass projects. See the Compass website for information on generating a new Compass project. To compile an existing Compass project, cd into the project directory and run compass compile to compile modified Sass files. If you’re consistently making edits, run compass watch which will watch for changes in that folder and compile any files that are modified.
Compass Extensions
An advantage on installing Ruby is you can install Compass plugins such as Susy or Compass Normalize which can extend Compass in new ways. These can be installed in the same was as Compass using the gem utility:
gem install susy gem install compass-normalize
Faster Sprite Generating
Compass includes plain-ruby gem for its excellent sprite generating functionality. You can install a new gem which will speed up the process. To do so, you will need the Ruby DevKit to be installed.
Download Ruby DevKit from the same website as before. Use 7-Zip to extract the archive to a place of your choosing; C:/Ruby/DevKit (or similar) will work fine. cd into that directory and run:
ruby dk.rb init ruby dk.rb install
Now you should be able to install the OilyPNG gem to speed up sprite generation:
gem install oily_png
Compass will automatically detect and use this gem.