using the :sass filter with :css

Posted by corroded on Stack Overflow See other posts from Stack Overflow or by corroded
Published on 2010-05-26T13:03:51Z Indexed on 2010/05/27 10:21 UTC
Read the original article Hit count: 220

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about css

Related posts about haml