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

Posted

技术标签:

【中文标题】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;" 

【讨论】:

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

以上是关于Haml:如何在 HAML 中为元素设置内联样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Haml 中包含内联 JavaScript?

如何在 Haml 中编写 if 条件?

Haml:如何设置动态类值?

Rails 表单(选择/选项) - 如何用 HAML 标记选定的选项?

matmatics的HAML5 Canvas问题[重复]

如何在 HAML 中发表评论