- Written by
Ed
- Posted December 7, 2011 at 6:04 pm
SASS is a programmable approach to stylesheets which really adds some cool features. (Full reference is available here.) It can make a stylesheet easier to read, easier to update and also adds some powerful features like functions, variables and imports. It is pretty easy to add to Ruby and Drupal, but usually requires Compass installed on the server.
I’d glanced at SASS before, but today someone brought it back to my attention and my first thought was “How can I use that in WordPress?” A few hours of coding and testing later, I’ve got a pretty nifty plugin solution for anyone who wants/needs SASS features.
It is probably less than perfect since it uses a fairly dated php port of HAML/SASS. Any limitations of that code will reflect in the plugin since it just serves as a wrapper. However, it does not require Compass installed on the server and is really easy to install and start using.
Here is the plugin:
WordPress SASS Plugin
Version 3.2.0
Here is how to make it work:
1. Install the plugin.
2. Copy style.css to style.scss in your theme.
3. Add the following code to your theme’s functions.php.
// Enables SASS to CSS automatic generation
function generate_css() {
if(function_exists('wpsass_define_stylesheet'))
wpsass_define_stylesheet("style.scss", "style.css");
}
add_action( 'after_setup_theme', 'generate_css' );
4. Make style.css writable (0775).
5. When editing the stylesheet, make all updates in style.scss only.
6. The plugin detects when style.scss has been updated, and rebuilds style.css from it.
If you try it, let me know how it goes and what you think of SASS.