newBike
newBike

Reputation: 14992

how to convert css style syntax in haml

I got the wrong haml in http://html2haml.heroku.com/

How to convert it in proper way ?

Because the haml didn't render the identical html when I load the page

HTML

<style media="screen">
      img { display: none; }
            body { overflow: hidden; }
            #canvas { position: absolute; top: 0; left: 0; }
</style>

HAML by http://html2haml.heroku.com/

%style{media: "screen"}
  :cdata
    img { display: none; }
    body { overflow: hidden; }
    \#canvas { position: absolute; top: 0; left: 0; }

Upvotes: 5

Views: 19362

Answers (3)

habudu
habudu

Reputation: 303

This should work for you, in case you don't want CDATA tokens in your code.

%style{media: "screen"}
  :plain
    img { display: none; }
    body { overflow: hidden; }
    #canvas { position: absolute; top: 0; left: 0; }

Upvotes: 3

RAJ
RAJ

Reputation: 9747

You may want to try htmltohaml

Input:

<style media="screen">
      img { display: none; }
      body { overflow: hidden; }
      #canvas { position: absolute; top: 0; left: 0; }
</style>

Output:

%style{:media => "screen"}
  img { display: none; }
  body { overflow: hidden; }
  \#canvas { position: absolute; top: 0; left: 0; }

Anyways, as Mandeep said, I also recommend that you should move your styles to stylesheets.

Upvotes: 2

nikolayp
nikolayp

Reputation: 17919

This should work

%body
  :css
    img { display: none; }
    body { overflow: hidden; }
    #canvas { position: absolute; top: 0; left: 0; }

P.S. But this's a bad practice to render html content which should be located in separate file.

Upvotes: 13

Related Questions