Getting Started – Pug
Installation ¶ Pug is available via npm: $ npm install pug Overview ¶ The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. The compiled function can be re-use
PugでHTMLコーディングを効率化・メリットと使い方を知る
古いサイトのヘッダー改修で全ページを修正したり、微妙にことなるHTMLを繰り返し大量に書いたり（エディタがどんどん重くなる）、閉じタグ忘れを血眼になって探したことはないだろうか。 EmmetとSassでコーディングはかなり楽になったけれど、僕の作業を一番効率化してくれたのは、同時期に覚えたPugという技術だった。ここでは、Pugの概要とメリットを簡単に紹介したい。 Getting Started – Pug PugとはPug（パグ）は、HTMLを効率的に書くためのテンプレートエンジン。使い方はCSSで言うSassみたいなもの。拡張子 .pug のファイルを書いてHTMLに変換する。 もともとはJade（ジェード）という名前で開発されていたものの、商標の関係で2016年あたりにPugとして再リリースされた。新しいPug（2018年3月12日現在v2.0.1）は繰り返しや属性などの書き方が若干
覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 ｜ Tips Note by TAM
以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あります。 タグ名はHTMLタグになる 改行をしてインデントをつければ入れ子になる インライン要素や改行にはパイプライン（|）を使う（ここだけ慣れが必要） HTMLはドット（.）で終わる要素の中に入れておけば解釈される 属性は丸括弧内に記述する クラス属性はドット（.）、ID属性はシャープ（#）で表す コメントにはHTMLとして出力されるものと、されないものがある イコール（=）を使えばエスケープできる インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる Pugとはなにか？ Sassを使ってCSSを作成している人は多いと思いますが、PugはH
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
