如何在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 by 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; }

PS但是渲染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所说，我还建议您将样式移至样式表。