使用:sass过滤器和:css [英] using the :sass filter with :css

问题描述

我们当前正在制作一个需要一些默认声明样式的小部件(javasacript包含小部件html，以及样式标签中的默认css)，但是问题是我无法链接" haml过滤器. /p>

我想做的是像这样添加一个内部样式表和小部件:

<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)，有没有办法做到这一点?

解决方案

也将此内容发布到haml组中，这是答复:

您不能嵌套过滤器.

您想以此为耻:

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

哦，如果嵌套的话，它可能会更漂亮.

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?

解决方案

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.

这篇关于使用:sass过滤器和:css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！