Haml：如何在Haml中为元素设置内联样式

Question

这是我的代码：

<div class='some' style='position: absolute; left: 300; top: 300;'>..</div>

它只解析 style='position: absolute' ，而不解析其他样式。我该如何实现这一点？

- ValeriiVasin

---

给出的答案是正确的，但它忽略了一个更重要的点：你不应该使用内联样式。定义一个CSS类并正确地使用它。 - Marnen Laibow-Koser

这只是一个临时解决方案 :) 尝试一些东西并清除所有更改。这就是我在寻找的原因 :) - ValeriiVasin

当您动态设置背景图像时怎么办？那时我使用内联样式。 - Joel Brewer

@JoelBrewer 我认为，在这种情况下，我会优先使用动态生成CSS覆盖文件（或者使用JavaScript），而不是使用内联样式。 - Marnen Laibow-Koser

Answer 1

如果您发布了您正在使用的HAML，那将会很方便，但是下面是实现方法：

%div.some{ :style => "position: absolute; left: 300px; top: 300px;" }

- dnch

---

值得注意的是，在元素或类名的末尾和大括号的开头之间不能有空格。 - FreeAsInBeer

Answer 2

不需要使用%div：

.some{ style: 'position: absolute; left: 300px; top: 300px;' }

- Incerteza

Answer 3

除了 Dan Cheail 提出的哈希方法外，另一种方法如下：

%div.some(style='position: absolute; left: 300; top: 300;')

- Vitaliy Yanchuk

Answer 4

如果您正在寻找图片的内联CSS：

<%= image_tag( 'image_name.png', style: 'height: 25px; width: 200px; position: absolute' ) %>

- Manoj Thapliyal

Answer 5

请求在https://github.com/haml/haml/issues/787上提出哈希特殊情况，以便我们可以编写：

%div{ style: { display: "none", width: "50px" } }

就像 class: ["class1", "class2"] 一样。

- Ciro Santilli OurBigBook.com

---

因为这不是对问题的回答，所以我会点个踩。这只是你对这种语法提出了一个功能请求的声明。 - Adam

@Adam感谢您的反馈。我的意图是说："这个问题证实了完美最直观的语法不可能存在，让我们为它投票"。 - Ciro Santilli OurBigBook.com

我明白你的意思。我认为这应该作为一条评论，而不是一个答案。现在，如果一个正在浏览答案的用户没有点击链接并查看您请求的结果，他们可能会认为它已经被实现了，并且您正在展示新语法作为解决方案的示例，但实际上并没有被接受。 - Adam