using the :sass filter with :css

问题

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?

回答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.

来源：https://stackoverflow.com/questions/2913150/using-the-sass-filter-with-css