如何在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>

http://html2haml.heroku.com/的HAML

%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; }