At-sign in haml class names

0
votes

I'm trying to make a webpage with UIkit (the front-end framework, not the iOS framework).

From v3, UIkit uses at-signs in its responsive class names (.uk-text-left@s affects small devices and up, .uk-text-left@l large devices and up...).

Using those classes directly causes haml to complain:

Illegal nesting: content can't be both given on the same line as %div and nested within it. (Haml::SyntaxError)

Or, if the html element doesn't contain any other elements, to produce a wrong output, with the @ in the html content:

<div class="uk-text-left">@s hello</div>

Using %div{ :class => "uk-text-left@s" } works fine, but this kind of frameworks rely so heavily on those classes that it makes a huge difference compared to just typing .uk-text-left@s.

Is there any other way to make haml accept the at-sign as part of the class name?

1
haml

1 Answers

1
votes

You'll probably need to use the long form methods for attributes.

Instead of the shorthand method

%h1.awesome-sauce

You'll need to do this

%h1{class: "@awesome-sauce"}

The shorthand is just syntactic sugar. You could always write a helper or decorator to handle the name generation if there is an obvious pattern.