Haml: How to set inline style for element in HAML

Question

Here is my code:

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

It parses only style='position: absolute', and doesn't parse the other styles. How can I achieve this?

The answer given is correct, but it missed a far more important point: you shouldn't ever be using inline styles. Define a CSS class and do it right. — Marnen Laibow-Koser, Nov 11 '11 at 15:26
It was temporary solution :) try something and clear all changes. That's why I was looking for this :) — ValeriiVasin, Nov 12 '11 at 20:18
What about when you are dynamically setting a background image? That's when I use inline styles. — Joel Brewer, Oct 16 '14 at 04:47
@JoelBrewer I think that for that, I’d dynamically generate a CSS override file (or use JavaScript) in preference to using inline styles. — Marnen Laibow-Koser, Apr 01 '21 at 15:12

score 133 · Accepted Answer · edited Aug 08 '12 at 20:37

133

It would have been handy if you'd posted the HAML you're using, but this is how it's done:

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

edited Aug 08 '12 at 20:37

Community

answered Nov 11 '11 at 05:24

dnch

11

It's worth noting that there cannot be a space between the end of the element or class name and the opening brace. – FreeAsInBeer Aug 27 '13 at 13:37

score 19 · Answer 2 · answered Apr 09 '15 at 14:35

19

No need to use %div:

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

answered Apr 09 '15 at 14:35

Incerteza

score 3 · Answer 3 · answered Jul 06 '14 at 15:45

3

Another approach in addition to the hash one by Dan Cheail is such:

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

answered Jul 06 '14 at 15:45

Vitaliy Yanchuk

score 1 · Answer 4 · answered Apr 30 '16 at 11:55

1

If you are looking inline css for image :

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

answered Apr 30 '16 at 11:55

Manoj Thapliyal

score -2 · Answer 5 · answered Jul 06 '14 at 15:41

-2

Requested a hash special case at: https://github.com/haml/haml/issues/787 to allow us to write:

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

much like is possible for class: ["class1", "class2"].

answered Jul 06 '14 at 15:41

2

Downvoting because this is not an answer to the question. It's just a statement that you made a feature request for this syntax. – Adam Mar 03 '18 at 00:08
@Adam thanks for feedback. My intention was to say: "this issue confirms that the perfect most intuitive syntax is not possible, let's upvote it". – Ciro Santilli OurBigBook.com Mar 03 '18 at 03:16
2

Sure, I get that. I think that would have made for a fine comment, instead of an answer. As it stands, if a user who was scanning answers didn't click the link and see the outcome of your request, they might get the impression that it was actually implemented, and you were showing an example of the new syntax as a solution, but it wasn't accepted. – Adam Mar 04 '18 at 03:49

5 Answers5