Skip to Content
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.
  • : Function ereg() is deprecated in /home/stevek/public_html/includes/file.inc on line 895.

Smarter Theming with SASS (Syntactically Awesome StyleSheets) on Drupal

Tags

SASS HAML

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 #000000

Compiles 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