jade+Sass+Foundationで爆速コーディング by D2DRAFT
-
- いいね！0
こざる🙈
@kozaru_kodera
Foundation と jade と Sassの勉強会来た。#d2draft (at @JUSOCoworking in 大阪市淀川区, 大阪府) swarmapp.com/c/lWhaAMeOqts
2015-05-17 13:46:56会場は、大阪のフリーランス系Web制作者にはお馴染みのJUSO Coworking 403号室でした
この会では、Codepenを使って、ライブコーディングをしてみました。
まずはHTMLのメタ言語であるjadeから。基礎的な記法と、HTMLからjadeに変換するサービスの紹介。
安田 学 / TAM inc.
@Gaku0318
jadeは各パーツを用意して必要な時に読み込む機能がある。これを使えばCMSを使わなくても対応できることもある。 #d2draft
2015-05-17 16:33:24
こざる🙈
@kozaru_kodera
HTML を jade に変換するサービス(いつもお世話になってます。) html2jade.org #d2draft
2015-05-17 14:10:44jadeはインデントで要素の親子関係を定義するため、インデントが深くなると一見わかりにくい。インデント毎に縦線を引いてくれるエディタや開発環境でないと扱いにくいかも…
続いて、CSSのメタ言語Sass（SCSS）について。簡単な記法、ネスト、ショートハンドのネスト、親の継承などを紹介。最後に、既存のCSSをSCSSに変換するサービスを紹介。多くのものはネスト程度しかしてくれないが、これは変数やプレースホルダなどをまとめてくれて高機能。
kanetei🚲🚲🚲🚲🚲
@kanetei
φ(.. ) > 汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 on @Qiita qiita.com/koh-taka@githu… #d2draft
2015-05-17 14:56:21なお、今回の勉強会では、コンパイルにPreprosを採用。黒い画面を使わず、jadeやSassのコンパイルが可能に。
最後に、フロントエンドフレームワークFoundationの紹介。Bootstrapの違いや、Gridシステムのコーディングなど。