如何在haml中转换css样式语法

Question

我在http://html2haml.heroku.com/

中找到了错误的haml

如何正确转换？

因为haml在我加载页面时没有呈现相同的html

HTML

<style media="screen">
      img { display: none; }
            body { overflow: hidden; }
            #canvas { position: absolute; top: 0; left: 0; }
</style>

HAML http://html2haml.heroku.com/

%style{media: "screen"}
  :cdata
    img { display: none; }
    body { overflow: hidden; }
    \#canvas { position: absolute; top: 0; left: 0; }

Answer 1

这应该有效

%body
  :css
    img { display: none; }
    body { overflow: hidden; }
    #canvas { position: absolute; top: 0; left: 0; }

P.S。但是渲染html内容应该位于单独的文件中，这是一种不好的做法。

Answer 2

您可以尝试htmltohaml

输入：

<style media="screen">
      img { display: none; }
      body { overflow: hidden; }
      #canvas { position: absolute; top: 0; left: 0; }
</style>

输出：

%style{:media => "screen"}
  img { display: none; }
  body { overflow: hidden; }
  \#canvas { position: absolute; top: 0; left: 0; }

无论如何，作为Mandeep said，我还建议您将样式移到样式表。

Answer 3

如果您不想在代码中使用CDATA令牌，这应该对您有用。

%style{media: "screen"}
  :plain
    img { display: none; }
    body { overflow: hidden; }
    #canvas { position: absolute; top: 0; left: 0; }