Monday, October 1st, 2007
Sass-y Dynamic CSS
<p>Geoffrey Grosenbach gets all funky when he discusses dynamic CSS using the Sass engine that comes with HAML.It allows you to:
Nesting
If you are sick of repeating yourself, you can get dry and nest your code:
Variables
You can set variables with !
CSS:
-
-
!note_bg= #55aaff
-
-
#main
-
:width 70%
-
.note
-
:background-color= !note_bg
-
p
-
:width 5em
-
:background-color= !note_bg
-
and even do math on the color variables:
CSS:
-
-
!pink = #ff43a7
-
!darker_pink = !pink - #333333
-
Imports
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
Related Content:
3.1 rating from 32 votes
This looks really cool
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
If you need something quite similar but python based go check out CleverCSS:
http://sandbox.pocoo.org/clevercss/
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.
@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.
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).
Nice trick! Based on that, I whipped up an example of how to do it with PHP on-the-fly. http://verens.com/archives/2007/10/01/variables-in-css/
@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. :(
thanks Andrew – it’s a small script. I’ll post the entire script into the blog post itself
@Nik: I agree – I mixed the technologies ;) I agree vars are quite good idea.
@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 :)
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.
http://blog.hasmanythrough.com/2006/03/23/dirt-simple-rcss-templates
@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.
@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.
SASSY! http://www.youtube.com/watch?v=ZUihru5iO3Q