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

Posted 2023-02-24

【中文标题】Haml：如何在 HAML 中为元素设置内联样式

【英文标题】：Haml: How to set inline style for element in HAML

【发布时间】：2011-12-26 18:17:39

【问题描述】：

这是我的代码：

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

它只解析style='position: absolute'，不解析其他样式。我怎样才能做到这一点？

【问题讨论】：

给出的答案是正确的，但它错过了更重要的一点：你不应该使用内联样式。定义一个 CSS 类并做对。

这是临时解决方案 :) 尝试一下并清除所有更改。这就是我一直在寻找这个的原因:)

动态设置背景图片的时候呢？那是我使用内联样式的时候。

@JoelBrewer 我认为为此，我会动态生成 CSS 覆盖文件（或使用 javascript），而不是使用内联样式。

【参考方案1】：

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

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

【参考方案2】：

不用%div:

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

【参考方案3】：

Dan Cheail 除了散列之外的另一种方法是：

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

【参考方案4】：

在https://github.com/haml/haml/issues/787 请求了一个哈希特殊情况以允许我们写：

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

class: ["class1", "class2"] 可能非常相似。

【讨论】：

投反对票，因为这不是问题的答案。这只是您对该语法提出功能请求的声明。

@Adam 感谢您的反馈。我的意图是说：“这个问题证实了完美最直观的语法是不可能的，让我们投票吧”。

当然，我明白了。我认为这将是一个很好的评论，而不是一个答案。就目前而言，如果正在扫描答案的用户没有单击链接并查看您的请求结果，他们可能会觉得它已实际实施，并且您正在展示新语法的示例作为解决方案，但它没有被接受。

【参考方案5】：

如果您发布了您正在使用的 HAML，那会很方便，但它是这样做的：

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

【讨论】：

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