Monday, October 1st, 2007

Sass-y Dynamic CSS

Category: CSS, Library, Rails

Geoffrey Grosenbach gets all funky when he discusses dynamic CSS using the Sass engine that comes with HAML.

It allows you to:


If you are sick of repeating yourself, you can get dry and nest your code:


You can set variables with !

  1. !note_bg= #55aaff
  3.   #main
  4.     :width 70%
  5.     .note
  6.       :background-color= !note_bg
  7.     p
  8.       :width 5em
  9.       :background-color= !note_bg

and even do math on the color variables:

  1. !pink = #ff43a7
  2. !darker_pink = !pink - #333333


You can also split up your work and @import foo.css to combine everything into one file for production, including the ability to share variables.

Play around with it by tinkering with their live online lab

Posted by Dion Almaer at 4:40 am

3.1 rating from 38 votes


Comments feed TrackBack URI

This looks really cool

Comment by Jack Gleeson — October 1, 2007

OK, so I’m a bit of an MOR programmer who hasn’t yet experienced the delights of Ruby, but doesn’t Haml and it’s offspring just look nasty with its significant symbols and meaningful whitespace?

!blindfold= put_on
!wait#for= flames

Comment by Jerome — October 1, 2007

If you need something quite similar but python based go check out CleverCSS:

Comment by michele — October 1, 2007

variables in CSS is quite good thing, but using this library you need to learn new syntax and probably most of the editors doesn’t suport it.

in top of that you have to use another JS lib. It’s the same as ORM – why you shuld learn complete new syntax when there is SQL which is quite descriptive.

Comment by Nik Chankov — October 1, 2007

@Jermone No flames here. I don’t think whitespace is nearly as bad as people assume. I wrote Haml and Sass (both whitespace significant) and I hadn’t ever used a language like that before (no python)… mostly Java and PHP and Ruby. I find that once people stop being reactionary about whitespace and allow their brains to parse the information… it becomes rather simple to read. Its all about letting go though and being open to new things and new ways of thinking.

@Nik: First off, you DEFINITELY don’t need any Javascript. Sass is compiled into a regular CSS *file* on the server during application booting. The client sees no difference in the CSS. Secondly, I don’t believe Sass is a completely new syntax for CSS. It is based on CSS… just with built-in scoping, less required characters (;{}), and a movement of the : (even though you can put the : where you are used to… “width: 70px” works), and constants. Sass is built on CSS both in browser terms and in generation and implementation.

Comment by Nik — October 1, 2007

Looks like a nice technology for Ruby users. I don’t really understand the removal of the ;{} symbols since it is almost the exact same code, I’d hope that it supports standard CSS syntax as well (which it might, I didn’t look too closely).

Comment by Andy Kant — October 1, 2007

Nice trick! Based on that, I whipped up an example of how to do it with PHP on-the-fly.

Comment by Kae Verens — October 1, 2007

@Kae Verens: The txt-version of your PHP script just runs the PHP script. I’d like to try out your code, but when I posted a comment to your blog it rejected the comment. :(

Comment by Andrew Collins — October 1, 2007

thanks Andrew – it’s a small script. I’ll post the entire script into the blog post itself

Comment by Kae Verens — October 1, 2007

@Nik: I agree – I mixed the technologies ;) I agree vars are quite good idea.

Comment by Nik Chankov — October 1, 2007

@Nik: Thanks for the reply. No question that visual clues, like indenting, can help understanding of code immensely, so I guess why not take it one step further and parse indents to determine logical structure…

I think the idea of CSS variables and nesting is a great, not to say an essential addition, and I’m sure if I could just take off my comfortable XHTML wellingtons for a while I’d realise that the water’s lovely :)

Comment by Jerome — October 1, 2007

Neat, I really like the way the CSS syntax is constructed.

On the topic, I just recently came across another solution for dynamic CSS that is simple to create and easy to use. It uses embedded Ruby in a .rcss file.

Comment by Gavin — October 1, 2007

@Jerome: The danger is, of course, in mixing tabs and spaces: you can’t normally see the difference. If one tab counts as one level of indentation, as what does one space count? If eight spaces count as one level of indentation, what if I have set my editor’s tab width to 4? If a line begins with two or three spaces followed by a tab, does it count as one level of indentation?

I feel like I’m stating the obvious, and these problems have probably been more or less solved for Python, but I’m not very comfortable with such syntax. Love the way it looks, though.

Comment by Tim Cooijmans — October 2, 2007

@Gavin: In my world… 2 spaces is the ONLY acceptable answer to indentation. Tabs throw an error if they exist at all. Odd numbers of spaces throw an error.

Comment by Hampton — October 20, 2007


Comment by deadlyicon — June 8, 2009

Leave a comment

You must be logged in to post a comment.