使用 :sass 过滤器和 :css

Question

我们目前正在制作一个需要一些默认声明样式的小部件（javasacript 包含小部件 html，以及样式标签中的默认 css），但问题是我无法“链接”haml 过滤器。

我要做的是添加一个内部样式表以及这样的小部件：

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

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

我们正在使用 haml，所以我尝试使用 sass 过滤器：

:sass
  p
    :color #f00

#widget-goes-here
  %p etc

遗憾的是，它只是生成了一个带有 p 的 div 加上生成的 css 代码在顶部：

p {color: #f00;}

paragraph here

然后我尝试使用 haml 的 :css 过滤器将内容包含在样式标签中（理论上它应该将段落文本颜色变为红色）：

:css
  :sass
    p
      :color #f00

#widget-goes-here
  %p etc

但这也失败了，它确实生成了样式标签，但它只是在其中包含了单词 :sass p :color #f00 （它没有解析 sass 代码）

我们确实把它改成了

 :css
   p {color: #f00}

结果很好，但我仍然打算在 sass 中进行样式设置（而不是普通的旧 css）有没有办法做到这一点？

Answer 1

也在haml组中发布了这个，这是回复：

您不能嵌套过滤器。

你想要这个 sass：

%style{:type => "text/css"}
  :sass 
    div 
      color: red 

哦，好吧，如果它是嵌套的，它会更漂亮。