css - 使用 :sass filter with :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 

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