使用 :sass 过滤器和 :css

Question

我们目前正在制作一个小部件，它需要一些默认声明的样式（小部件 html 由 javasacript 包含，以及样式标签中的默认 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

遗憾的是，它只是生成了一个带有 ap 的 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 

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