Haml:CSSやJavaScriptをフィルター機能で記述する

goto_jp 530views 更新:2014年8月11日

例えば下記のように<style>タグを書こうとしてもHamlコンパイル時にエラーが出てしまいます。

!!!
%html
    %head
        %title Haml test
        %style
            .test {
                margin: 0px;
            }
    %body

下記のようにHamlのフィルター機能を使い、HTML以外のコードを記述することができます。

!!!
%html
    %head
        %title Haml test
        :css
            .test {
                margin: 0px;
            }
    %body

JavaScriptも同様

!!!
%html
    %head
        %title Haml test
        %meta(charset="UTF-8")
        :css
            .test {
                margin: 0;
            }
        :javascript
            alert('test');
    %body

上記Hamlをコンパイルすると下記HTMLに出力されます。

<!DOCTYPE html>
<html>
  <head>
    <title>Haml test</title>
    <meta charset='UTF-8'>
    <style>
      .test {
        margin: 0;
      }
    </style>
    <script>
      alert('test');
    </script>
  </head>
  <body>
  </body>
</html>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません