Smarter Theming with SASS (Syntactically Awesome StyleSheets) on Drupal
Mar 12/2009
Tags
Over the past couple of months, my interests have peaked in the land Ruby on Rails in particular SASS (Syntactically Awesome StyleSheets) which is apart of the RubyGem plugin, HAML. This was initially introduced to me while working on a project for Raincity Studios and the brilliant developers at OpenBand Labs by lead designer and front-end developer, Alex Bendiken.
SASS (Syntactically Awesome StyleSheets) is a meta-language on top of CSS that‘s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
Features
- Whitespace active
- Well-formatted output
- Elegant input
- Feature-rich
Examples of SASS
Similar to flat CSS, selecting elements are done by the elements ID and or class name(s). Here is an example of SASS written with nested rules.
#main p
:color #00ff00
:width 97%
.redbox
:background-color #ff0000
:color #000000Compiles to:
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }For additional documentation on SASS, please visit The SASS Homepage.
Benefits to using SASS
I've had the privilege of working with a bunch of projects already using SASS and have been thoroughly amazed at how fast and efficient it is at maintaining a consistent code structure and providing organized code, which is often difficult to do in a collaborative environment when working on client projects.
Modularization of code is also a benefit to this framework. Being able to plug in various "pre-made" styles allows themers to share snippets while maintaining hierarchal syntax awesomeness.
Starting with Drupal
Currently there are 2 Drupal projects, maintained by myself, which focus on development with SASS on Drupal.
-
Basic (SASS Optimized)
Basic boasts a clean HTML structure with extensible CSS classes and ID's for unlimited theming possibilities as well as a top-down load order for improved SEO. This version includes SASS ready files for instant development on Drupal. This theme is intended to be used with the SASS API module.
-
SASS API
The SASS API allows themers to automatically compile their SASS files into flat CSS files to be rendered for the visiting user. SASS files can either be compiled in real-time or during cron run.
Notes
- SASS requires the HAML RubyGem plugin to be installed. Mac OSX Leopard has native support for SASS (otherwise run $: gem install haml)
- For installation instructions on installing Ruby/Haml on Mac OSX Tiger, please read: Building Ruby, Rails, LightTPD, and MySQL on Tiger
Your examples would be much more compelling if your
filter preserved whitespace. I'm glad I looked at the SASS homepage to see if there was a reason I should care about it.If I were a designer, I'd use SASS just for the ability to assign variables. Imagine being able to define a palette at the beginning of a sheet, and using each color over and over again through a multitude of rules. Tweaking the colors then only has to happen once, instead of every place it is used.
Awesome. I've been working with Rails a little bit lately and think Haml and Sass are awesome! I didn't know that there was work being done to integrate it with Drupal. Thanks for pointing this out, as I mentioned this to someone at Drupalcon but as far as I knew at the time, compiling would have had to be manual.
Now if only we could use Haml... :)
Post new comment