On Thu, Aug 5, 2010 at 3:41 PM, Tim Matthews <tim.matthews7@gmail.com> wrote:
On Thu, Aug 5, 2010 at 11:33 PM, Mark Bradley <barkmadley@gmail.com> wrote:

but CSS type checking might be possible within hamlet.
 
I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch?


Tim and Mark,

Firstly, let me come clean about something: I got really lucky with Hamlet ;). I'd never used Haml before, and was planning on writing a templating system. I saw the Haml syntax, thought it might be easy to implement, and everything turned out for the best. (Actually, first I thought of the name Hamlet and then decided I *had* to base my templating system on a Haml syntax, but that's beside the point ;)).

Anyway, regarding sass: I have no idea. I've never used it, and have looked at it even less than I had looked at Haml. It has always seemed like it didn't give enough bang-for-the-buck versus plain CSS, but if we can get static typing out of it, that it's *definitely* worth it.

So the real question: how can we get static typing for CSS? And more importantly, what would that mean? It seems that it really applies to specifically two issues: ids and class names. Perhaps the right approach here is to allow Yesod to generate these names automatically; given the Widget framework, something along the lines of:

myWidget = do
    className <- newIdent
    -- yes, addStyle currently uses Hamlet templates, with the release of blaze-builder, that will probably change
    addStyle [$hamlet|p.$className${color:red}|]
    addBody [$hamlet|%p.$className$ Red Text|]

There's also the approach of having a datatype for the CSS classes:

data MyClassNames = Red

myWidget = do
    addStyle [$hamlet|p.$Red${color:red}|]
    addBody [$hamlet|%p.$Red$ Red Text|]

Or if we decide to create a sass quasi-quoter:

data MyClassNames = Red

myWidget = do
    addStyle [$sass| .... whatever this looks like |]
    addBody [$hamlet|%p.$Red$ Red Text|]

This is really just a random collection of thoughts I have on the topic, I haven't really thought anything out fully.

Michael