When we built the new Magento responsive theme, we decided to use Sass as the CSS pre-processor and Compass as the compiler (technically known as a transpiler). Sass is the base syntax that supports mixins, variables, and nesting and Compass is a compiler that extends Sass’s capabilities by adding CSS3 mixins that we used to make the responsive theme compatible with older browsers. Here is the TL;DR infographic:
Image Source: http://sonspring.com/journal/sass-for-designers
You can read all about the basics of working with the new responsive theme over at the Magento knowledge base. In this article, we’re going to take a more in-depth look at how to compile with Compass on the command line and via PhpStorm.
This article assumes that you’ve gone through the Magento RWD documentation and you have a custom Magento theme setup at skin/frontend/custompackage/customtheme.
Before you can compile with Compass, you need to install the command-line utility. After you’ve installed Compass, you can compile by running this command:
compass compile <MAGENTO_DIRECTORY>/skin/frontend/custompackage/customtheme
This command will compile your .scss files into .css files, but you have to run this command every time you make a change to your .scss files. To automatically re-compile your .scss files every time there is a change, you can run this command:
compass watch <MAGENTO_DIRECTORY>/skin/frontend/custompackage/customtheme
While it is valuable to know how Compass works on the command-line, many developers use their IDE or a standalone GUI app (like Scout or CodeKit) to compile with Compass. If you are going to do a lot of frontend development with Sass/Compass, I could encourage you to experiment with your different options and choose the approach that best integrates with your workflow. I use PhpStorm, so that is what I use to compile with Compass.
PhpStorm seems to have become the de facto IDE for Magento backend developers, due to its excellent support for features like syntax highlighting, auto-completion and debugging. However, I was skeptical about using a Php-oriented IDE for front end development, as my previous experiences with robust IDEs like Eclipse/PDT provided to be clunky. Prior to PhpStorm, I used apps like CSSEdit/Espresso/TextMate for front end development. However, I found PhpStorm to be a joy to for front end development, as it offers features like CSS/HTML validation, Sass variable auto-completion, and rapid HTML markup creation via it Live Templates. It is now my IDE for frontend and backend development.
PhpStorm has a feature called “File Watcher” that allows you to automatically run Compass any time you change a .scss file. The way this feature works is that any time you make changes to .scss files in PhpStorm, PhpStorm will run a command line call to “compass compile”. Here are the steps for setting up this feature:
So based on the configuration screenshot above, PhpStorm will essentially run these commands any time a .scss file is changed:
compass compile skin/frontend/custompackage/customtheme/scss
If you have multiple themes for which you need to compile .scss files, you simply need to setup File Watchers for each theme. For example:
If you follow these steps, your .scss files should be compiled any time you make a change in PhpStorm!