読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

pug (jade)

jadeがpugになって変わった所のメモ

HTMLのコーディングの際にjadeを愛用しています。 jadeがpugになってから、所々仕様が変わっていたのでメモ Mixinの呼び出し方が変わった mixin 関数名() ではなく+関数名()になった。 jade mixin foo('引数') ↓ pug +foo('引数') 文字列中の変数展開の方法…

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

jade テンプレート内の配列を見やすくするために改行したい。

jadeテンプレート内で配列やオブジェクトを記述する時、値を見やすくしようとして改行すると書き方によってはエラーになってしまいます。 エラーになる書き方 // jade - var list = [ 'one', 'two', 'tree' ] - var obj = { a: 'one', b: 'two', c: 'tree', …

Gulp jadeコンパイル時に変数をGulpから渡したい

jadeでテンプレートを作成していて、開発時用と本番環境用とでCSSやjsの読み込みを変えたいというような事があります。 jadeでconfig.jadeの様なものを作成しておいて、devModeのようなフラグを基に出し分けることも出来るのですが、都度変数を変えてコンパ…

jade 属性の中にコーテーションを出力したい

最近はgulpでjadeをコンパイルしています。 <ul> <li ng-class="{active: thing.score < 50}"> <a href='[permlink slug="url"]'>LINK</a> <li> <ul> HTMLの属性などの中にWordPressのショートコードや、AngularJSのng-classとかを属性の中にコーテーションを使った値を入れたいケースなどがあります。 普通に書くとエスケープされる 属性の中の<や"がエ</ul></li></li></ul>…

jadeでIE振り分けのタグがまた変わってた...

以前 jadeでIEの振り分けタグを記述する方法を書いていましたが、 また記述方法が変更になっていたようです...以前書いていた はコンパイルエラーを起こすようになっています。//[if lt IE 9.0]>みたいな感じで記述しろとの事の様です。 ワンライナーで記述…

Jade 変数に入れたHTMLをHTMLとして出力する

jadeでhtmlタグを含んだ変数を出力したい時 # jade - var html = '犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi">俺</a>だよ!'; p= html div #{html}の様に書くと # HTML <p>犯人は&lt;a href=&quot;https://twitter.com/intent/user?screen_name=KiKiKi_KiKi&quot;&gt;俺&lt;/a&gt;だよ!</p> <div>犯人は&lt;a hr</div>…

jadeでIE振り分けのタグを書く方法

※ jadeをアップデートしたら記述方法がかわっていました。 この方法ではコンパイルエラーになる可能性があります。 jadeでIE振り分けのタグがまた変わってた... - かもメモ超めんどくさがりなので、最近はjadeでhtmlを生成しています。IEの振り分けタグ をj…