Sass (particularly SCSS) could very well be the new CSS providing a better language for developers and designers to write better CSS faster than ever. Compass is a Sass framework offering many utilities for creating modern sites and cross-browser support. Although heavily tied to the Ruby world, both of these tools can easily be used in the context of a Wordpress theme to make your life (and the life of your users) better.
If you are looking for a slimmer alternative, bourbon also provides many nice utilities. Have you used bourbon or alternatives? What did you think?
What about compass-wordpress?
While there is a compass-wordpress plugin I gave it a shot and it simply didn’t work. Since using compass directly isn’t all that difficult I used compass directly as getting compass-wordpress up and running didn’t seem worth the effort. Also the latest changes on github are from 2009 so I doubt it’s still maintained.
As shown on the compass installation docs, installing Sass and Compass is pretty easy:
1 2 3 4
(I installed rb-fsevent as it provides some platform-specific optimizations and Compass kept hinting I should.)
Compass setup and configuration
Assuming you have an existing wordpress theme and want to use compass with it, you need only create a few files and folders. As posted previously on using compass sprites with wordpress, there are some non-obvious details.
Here’s the basic file and folder setup.
- images/ is where you can put non-sprite images
- images/sprites contains images to be combined into a sprite (such as icons)
- sass/ contains any Sass files to be compiled to CSS. You likely only have one file but could also have IE- and print-specific stylesheets.
- sass/style.scss is your primary Sass to be compiled to your themes primary CSS file (which must be in the theme root)
- config.rb contains your compass configuration (see below)
Use the following for a basic config.rb:
1 2 3 4 5 6 7 8 9 10 11 12
To start, create the files and folders but move your existing style.css to sass/style.scss. This is probably a good start:
Watch for and make changes
Now that your project is set up, open a terminal and have compass watch for changes:
This will watch for changes to your style.scss and create a new style.css. Did you have any problems setting this up or use it differently?