[Haskell-cafe] Re: [web-devel] statically compiled css

[Michael Snoyman]

On Thu, Aug 5, 2010 at 3:41 PM, Tim Matthews <tim.matthews7 at gmail.com>wrote:

> On Thu, Aug 5, 2010 at 11:33 PM, Mark Bradley <barkmadley at 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.haskell.org/pipermail/haskell-cafe/attachments/20100805/0de25293/attachment.html