using the :sass filter with :css

Question

We are currently making a widget that requires some default declared styles along with it(widget html is included by javasacript, along with the default css in style tags) but the problem is i can't "chain" haml filters.

What I'm trying to do is to add an internal stylesheet along with the widget like so:

<style type="text/css">
  p {color: #f00;}
</style>

<div id="widget-goes-here">
   <p>etc</p>
</div>

We are using haml so I tried doing it with the sass filter:

:sass
  p
    :color #f00

#widget-goes-here
  %p etc

sadly, it just generated a div with a p plus the generated css code literally on top:

p {color: #f00;}

paragraph here

I then tried using the :css filter of haml to enclose the thing in style tags(theoretically it should then turn the paragraph text color to red):

:css
  :sass
    p
      :color #f00

#widget-goes-here
  %p etc

But this also failed, it did generated style tags but then it just enclosed the words :sass p :color #f00 in it(it didn't parse the sass code)

We did change it to

 :css
   p {color: #f00}

and it worked out fine, but I still plan on doing the styling in sass(instead of plain old css) is there a way to do this?

Answer 1

Also posted this in the haml groups and this was the reply:

You can't nest filters.

you want this for sass: %style(type="text/css") :sass div color: red

Oh well, it could have been prettier if it were nested.