どうも~。
ようやっとsassでコーディングが完了しました。
コーディングしてみた感想としては、「環境を整えて慣れると鬼早くコーディングが出来るな!」ってことですね。いい勉強になりました。
そんなわけで、sassを初めて使うにあたって参考にした記事をまとめておきますね~。
sass、compass編
これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG
まずはsass導入の流れをここで確認。rubyのダウンロード、Dreamweverの設定、sassのコンパイルソフトkoalaの設定と初期設定方法はほぼこちらの記事でカバーされてます
[Web]Sass(Scss)+ Compassのテンプレートファイルを作成したので晒してみる | OZPAの表4
テンプレートファイルのサンプル。ウチも見習って【_module.scss】【_vars.scss】ってなカンジで分割して管理することにしました。
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集 | Webクリエイターボックス
おなじみWebクリエイターボックスさんの使えるmixin集。remフォントや絶対位置指定、透明度等を活用させていただきました。
[Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開! | Cappee Design
こちらもmixinや変数の参考に。明度でカラー設定を登録しておけるのは目からウロコ。
sublime text 2、emmet編
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと| clear sky source
今話題のエディタ【sublime text 2】導入編。最初はDreamweverでコーディングしてたのですが、emmetのスニペットが別ファイルで管理できなかったり色々不便だったのでね。さすが話題のエディタだけあって、かなり使いやすいです!また、ここのページの自作スニペットも導入させていただきました。
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | Developers.IO
emmetはzen-codingの進化版。これがないともうcss書けないですw
Emmetの拡張方法(snippets.json)|tamlog
emmetにおいて自分で使うオリジナルスニぺットを別ファイルで管理する方法。これがDreamweverだと出来ないんですよねぇ…。sublime text 2だと簡単に出来るんですが。
Cheat Sheet
emmetのチートシート。直感的に使っても結構できるんですが、確認用としてメモ。
↑ブログ村ランキング参加中… クリックよろしゅうm(_ _)m
タグ: compass, css, Dreamwever, emmet, html, koala, sass, sublime text 2, まとめ
コメントする