how to convert css style syntax in haml

Question

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; }

Nocuous

Why are you using inline styles? Move them to assets – Grimbal

Using inline is handy to test something works without having to recompile assets; if it works, then can move it to assets – Decarburize

For the sake of motivation, email layouts require inline stylesheets. – Colpin

Answer 1

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.

Octodecimo

This won’t include the media="screen" attribute. You’ll need to use an actual tag (e.g. %style(media="screen")) in order to get the attribute. – Oratory

Answer 2

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; }

Subsistence

Answer 3

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.

Pelting

It's a bad practice to use inline styles – Grimbal