似たようなレイアウトのHTMLファイルを量産するとき、コンポーネントやモジュールを意識してCSSを設計する時など色々な方法が世の中にはありますが、最近Jade×Stylusが一番学習コスト低く設計できたのではまっています。今回はそんなJade×Stylusの魅力について書いてみます。
まずJadeとStylusの特長を簡単に説明します。
- インデント強制言語、pythonのような記法をとり、コードの見通しが良い
- ejsのようなテンプレート言語と異なり、Jadeはextend(継承)やmixinが使いやすい
- Stylusはscss記法と異なり、{}やセミコロンなど使わなくて済む。変数など直感的に扱える
- gulpやgruntなどタスクランナーにも対応しているためコンパイルなどの自動化がしやすい
- JadeもStylusも同じ人が開発しているので、学習コストが低い。
実際のJadeとStylusのコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
//Jade #wrapper .inner //クラス名だけを記入するとdivとして扱われます。 p.hoge hello world //Jadeコンパイル後 <div id="wrapper"> <div class="inner"> <p class="hoge"> hello world </p> </div> </div> |
これだけでも閉じタグがいらない、クラス,ID名だけで済むなどのメリットがあげられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//Stylus color = #fff //このように変数を定義できます fs = 12px #wrapper width 100% margin 0 auto .inner background color margin-bottom percentage(10/20) //percentageなどの関数も使えます。 .hoge font-size fs &--large //&記法で、無駄なクラス名の記述を減らす事もできます。 font-suze fs*1.5 //Stylusコンパイル後 #wrapper { width: 100%; margin: 0 auto; } .inner { background: #fff; margin-bottom: 50%; } .hoge { font-size: 12px; } .hoge--large { font-suze: 18px; } |
colorのように変数を定義したり、percentageのようなscss関数も使えたりします。また&記法でのネストもしやすいです。
このようにJadeもStylusもクラス,id名だけで管理できて、インデントを意識して中に記述を書いていくためテキストエディタを分割して、実装する際に同じような記述が並び見通しがスムーズです。
今回は、JadeとStylusを使ったより開発効率を上げる例を上げてみたいと思います。
Jadeは継承(extend)を使う事で開発が爆速になりますので簡単なサンプルを用意してみました。
1.まずベースとなるレイアウトを以下のように作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//_baseLayout.Jade block vars doctype html html(lang="ja") head meta(charset="utf-8") meta(name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0") title #{title} //変数として渡す事もできます。 link(rel="stylesheet" href="./asset/css/style.css") script(src="./asset/js/app.js") body block header //例えばここに共通で読み込むナビとかを設置します block main //各ページの中身を記述 block footer //共通のフッターなど |
このように一度、ベースのレイアウトを仮組して、blockで渡す中身だけを継承先で変える事ができます。
またgulpなどを設計する際は、optionのbasedirで、ベースのディレクトリを設定することで、相対パス地獄から抜ける事も出来るのでおすすめです。
2.テンプレートを作成したら、それを継承先で読み込み、以下のように記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//index.Jade extends /template/_baseLayout.Jade block vars - title = "hello Jade" append header //appendはheaderの中身をかき消さずに追加で記入できます。共通ヘッダー+ 何かというときは便利です。 block main //このように継承先で適応するhtmlを記述も出来ます。 main.main__contents p.main__txt hogehoge |
以下がコンパイル後のHTMLソースコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <title>hello Jade</title> <link rel="stylesheet" href="./asset/css/style.css"> <script src="./asset/js/app.js"></script> </head> <body> <main class="main__contents"> <p class="main__txt">hogehoge</p> </main> </body> </html> |
このように骨組みのテンプレートだけ作り、継承先で必要な記述を書くとコードを書く量は大幅に削減され、量産を行う際も必要な情報だけを記述するだけで済むので開発は爆速になります。
タイトルやメタ情報なども変数として扱うと見通しも良くなります。extend元のテンプレートにはincludeやmixinの読み込みもできるので、パーツごとにJadeファイルを整理するとより見通しも良くなります。
このように、JadeとStylusを組み合わせれば、不必要な記述も減り開発効率は以前より増すはずです!
今回はざっくりと概要を説明しましたので、基本的な記述方法などは、公式のドキュメントを読んでいただければと思います。
以上、Jade×Stylusでpythonicなマークアップのすすめでした。
