先日行われた、D2D jade+Sass+Foundationで爆速コーディングに参加してきました。

D2D “Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズ。

Slimを導入した際も「jade良いよ！」っていう声を聞いており興味があったのと、Foundationの使い方で疑問があったので参加してきました。

今回はCodePenが使われました。Web上でHTML, CSS, Javascriptのコーディングができて、ライブプレビューまで出来ちゃう優れもの。 ちなみにそれぞれ今回使うjadeやSassの他のテンプレートエンジンやCSSメタ言語なんかにも対応しているCofeescriptなんかにも対応しているという

jade

jadeはHTMLのテンプレートエンジンで、よく聞くHamlとかNode.jsで動いてるらしく、jadeの中でJavascriptのコードが埋め込めるらしいです。

書き方はSlimに似ていて要素(タグ)の山括弧<>を外して、属性なんかは丸括弧()で書いていくものらしいです。

書き方に関しては、Jadeの記法について（あまりまとまっていない） – Qiitaがタイトルに見合わずまとまっているようなのでそちらを御覧ください。

前作ったものもjadeでやりたいなーって人はhtml2jadeというサービスを使えばHTMLからjadeに変換されるのでオススメ。 ただ、途中の一行で書けるところなんかも1個1個行を分けて書き出されるので、その辺は適宜修正しましょう。

今回はじめてjadeを触りましたが、書きやすそうな雰囲気やテンプレートを分けれる あたりに少し惹かれる部分がありました。

Sass

今回の参加者の方は何かしらの形でコーディングに関わっている人が多いみたく、Sassについて理解している人も多かったようです。 内容としては、入れ子の話がメインだったように思います。入れ子だけでも使えると少し幸せになれますよね。

こちらも既存のコードはcss2scssというサービスで簡単にSCSS(記法)のコードに変換してくれます。Sass記法派の方は他をあたってください。

Foundation

最近僕もお気に入りのCSSフレームワーク。 自分の中で、今回は使い方があっているかの確認と疑問の解消でした。

変数の値ってどう変えるのがいいの？

変数の値を変更する場合は_setting.scssをいじる。 これまで、変数の値を変えるとなると、コンポーネントのファイルを直接触っていたのですが、この方が楽なのとかバージが。

使いたいコンポーネントを_setting.scssのコンポーネントからコメントアウト外して使ってるけどこれでいいの？

むしろ上に書いてあるfoundationをimportするより、ファイルサイズを抑えられるらしい。

rem-calc() お前は誰だ

A. 引数( ()の中の値 )をremに変換してくれる関数。 この前さわる機会があって、適当に値を変えるも意味がわからずでしたが解消されて良かったです。

まとめ

今回は新しい技術に触れるだけでなく、既に使っているものの復習が出来て良かったです。

また、懇親会がめちゃくちゃ楽しくて、新しい出会いの他、勉強会を超えた知識を付けることも出来て良かったです。

次回以降のD2Draftの情報は次から https://d2draft.doorkeeper.jp/