Free Website Tips
Recent Twitter Posts
DrupalCon Cliff's Notes: Using Sass & Compass in Drupal Theming
CSS is the least architected, worst thought-out part of a webpage. PHP exists (largely) to <strong>preprocess</strong> HTML. CSS had no-such equivalent. Enter Sass & Compass, etc.
What are these acronyms of which you speak?
LESS, Sass & Compass, Stylus & Nib - all are various CSS pre-processing languages
(Hugely helpful) Oversimplification
Sass is the underlying framework - the preprocessor. Compass provides plugins and easy ways to get the most out of Sass in the simplest ways possible.
Different formatting: Sass vs. SCSS
- SCSS - more similar to SCSS
- Sass - more similar to Ruby (preferred by both presenters)
Benefits of Compass:
- Compass makes vendor prefixes easy - it expands correct syntax out into browser-relevant versions
- Compass brings sanity to gradients - it expands out to all browser prefixes as well as to SVG!
GUIs to compile Sass & Compass
They prefer command line (ie compass watch), but these exist for those who don't.
Part 2: Whither a module?
Warning: This is the section that made me stop listening. They reviewed three modules:
- http://drupal.org/project/sass - rather limited (SCSS support only, requires phamlp, and web server needs write access to theme
- http://drupal.org/project/compass - (recommended) requires ruby to be installed so compass can be installed on ruby
- http://drupal.org/project/sassy - rewrite of Sass in PHP, requires libraries and other module dependencies
It was at this point I realized that CSS preprocessors are not ready for prime-time in Drupal-land. I realize the first slide in this section spoke specifically about "Bad Reasons" for using a Drupal module, and my reasoning probably includes both:
- Getting Ruby installed on production servers is daunting
- Synchronizing a second language/platform/system across development, staging and production is terrifying
Go ahead, you hackers, laugh. Done? Well now, in Drupal-land there are so very many options available. In web-land there are even more. At some point you have to pick and choose which you'll do and a former manager I had would always say "go for the low-hanging fruit". I'm ridiculously glad there are people like Matt Farina who are willing to live on the cutting edge, but for average clients and normal sites I'd rather invest hours into multiple improvements with existing well-tested modules, instead of hacking my way through cutting edge modules with under 200 sites using them.
Soooo...skim through the rest of the session slides, and call it a day. Unless you've already resolved to use Sass & Compass. In that case dive in and listen to the session yourself and know that - when I do start using the then well-tested Sass modules - you'll have my gratitude for your early adoption.