title: using the :sass filter with :css
body: <p>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.</p>
  
  <p>What I'm trying to do is to add an internal stylesheet along with the widget like so:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    p {color: #f00;}
  &lt;/style&gt;
  
  &lt;div id="widget-goes-here"&gt;
     &lt;p&gt;etc&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>We are using haml so I tried doing it with the sass filter:</p>
  
  <pre><code>:sass
    p
      :color #f00
  
  #widget-goes-here
    %p etc
  </code></pre>
  
  <p>sadly, it just generated a div with a p plus the generated css code literally on top:</p>
  
  <pre><code>p {color: #f00;}
  
  paragraph here
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>:css
    :sass
      p
        :color #f00
  
  #widget-goes-here
    %p etc
  </code></pre>
  
  <p>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)</p>
  
  <p>We did change it to </p>
  
  <pre><code> :css
     p {color: #f00}
  </code></pre>
  
  <p>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? </p>