如何将CSS样式语法转换为Haml？

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

- newBike

---

为什么要使用内联样式？将它们移到资源中。 - Mandeep

使用内联是很方便的，可以测试某些功能是否正常工作，而无需重新编译资源；如果它能正常工作，那么就可以将其移动到资源中。 - xxjjnn

为了激励，电子邮件布局需要内联样式表。 - nyi

Answer 1

这应该可以运行

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

附言：但是将应该位于单独文件中的HTML内容呈现在此处是一种不好的做法。

- itsnikolay

---

这不包括media="screen"属性。您需要使用实际标签（例如%style(media="screen")）才能获取该属性。 - matt

Answer 2

如果您不想在代码中使用CDATA标记，这个方法适用于您。

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

- habudu

Answer 3

您可能想尝试 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; }

无论如何，正如曼迪普所说，我也建议您将样式移动到样式表中。

- RAJ

---

使用内联样式是一种不良做法。 - Mandeep