tamlog

主にwebのフロント回り たまに登山

CodeKitのKit Language

スポンサーリンク

CodeKitがあれは黒い画面を触らなくてもsassやらlessやら使う事ができます。 フロントエンドの作業をとても楽になるのでMacユーザーにお勧めです。 https://incident57.com/codekit/

機能が沢山あるので気になりましたら公式サイトをご覧ください。 ・Compiling ・Optimizing Images ・Autoprefixer ・Bless ・Foundation ・Bourbon ・Compass ・Minifying ・Live Browser Reloads ・Bower など

そしてCodekitにはKit Languageという独自のテンプレート機能があります。 phpのinclude、Dreamweaverで言うとテンプレート機能と同じ様なものです。 手軽に使えて便利なのです。

使い方は簡単です。 予備知識はとして以下を頭に入れとくと良いです。 ・拡張子は「.kit」を使う ・HTMLのコメントの書式で記述する ・if文などは使えない ・値の空はダメ エディタによっては.kitを認識しないかもしれません。 その場合は拡張子の設定変更とかすると大丈夫だと思います。

大まかな流れ 1,CodeKitを起動 2,index.kitを作成 3,index.kitを修正 4,index.htmlが書き出される

準備できたら後はCodeKitが勝手にコンパイルするので通常通り作業をして構いません。

個人的には以下の様に使ってます。 ■フォルダ構成

 index.kit
 news
    └── index.kit
 include
    ├── footer.kit
    ├── header.kit
    ├── meta.kit
    └── link.kit

■使い方 変数

<!-- $title = サイトタイトル  -->
<!-- $keywords = サイトキーワード  -->
<!-- $detection = サイトディスクリプション  -->
<!-- $nav1 = no-current -->
<!-- $nav2 = no-current -->
<!-- $nav3 = current -->
使う場合
<title><!-- $title --></title>
<meta name="description" content="<!-- $detection -->">
<meta name="keywords" content="<!-- $keywords -->">
<li class="<!-- $nav1 -->">ナビ1</li>
<li class="<!-- $nav2 -->">ナビ2</li>
<li class="<!-- $nav3 -->">ナビ3</li>

インクルード

<!-- @include "include/header.kit" -->
複数の場合
<!-- @include "include/meta.kit, include/link.kit" -->

エディタに依存したり、phpが使えない環境など関係無くインクルード出来ます。 条件分岐などは使えないですがちょっと分割したい場合などとても便利です。 CodeKitが使える環境であればぜひお試しあれ。