Jadeの構文: CSS や JavaScript を使用する

更新: 2013-12-29 / 作成: 2013-12-29

Jade テンプレート内に、直接 CSS や JavaScript のコードを記述するときは、ドット記法によるテキストブロック内に記述します。

test.jade

style.
  body {
    color: #111;
    background: #ccc;
  }
script.
  var message = 'Hello';
  alert(message);

実行結果

$ jade --pretty < test.jade
<style>
  body {
    color: #111;
    background: #ccc;
  }
</style>
<script>
  var message = 'Hello';
  alert(message);
</script>

link タグや script タグによって、外部の CSS や JavaScript コードをロードするには、以下のようにします。

test.jade

doctype html
html
  head
    meta(charset='UTF-8')
    link(rel='stylesheet', href='main.css')
    title Hello
    script(src='jquery.js')
    script(src='main.js')
  body
    p Hello

実行結果

$ jade --pretty < test.jade
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>Hello</title>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

Jade

Jade テンプレートエンジンのメモ
へ戻る

関連記事