こんにちは。新潟ホームページ制作【マザーシップ】です。

Sassチートシートに引き続き、Compassのチートシートを公開します。

そんなに使用する機会が無いコード(Resetなど)や
対応ブラウザが少ないコード(Columnsなど)、
および、皆さんがそれぞれのスニペットを持っていると思われるSprite関連のコード等は省略しています。

なので、覚えておきたいコードが厳選されているはず、です。
Compassを使うみなさんのお役に立てたら嬉しいです。

Compassチートシートのダウンロード

PDFデータとXMind(マインドマップ作成ツール)データを用意しました。

XMindのソフトをインストールしている方であれば、ダウンロード後の編集が可能です。
使いやすいように調整しちゃってください。

Compass Cheet Sheet

Compass Cheet Sheet

PDF(横用紙) ->Compass_CheetSheet_Yoko.pdfをダウンロード
PDF(縦用紙) ->Compass_CheetSheet_Tate.pdfをダウンロード
XMind -> Compass チートシート var.0.1を表示&ダウンロード

Compassチートシート更新履歴

バージョン更新日更新内容
0.12014/01/25-

Compass関連参考サイト

チートシートを見ても記憶が蘇らない時によく参考にさせていただいているサイトをご紹介させていただきます。

コードの確認

Web制作者のためのSassの教科書 – Compassのミックスインを使う
Web制作者のためのSassの教科書 – Compassの関数(Image Helpers)
SassとCSSの比較が掲載されています。

【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|Compass基礎編 | Developers.IO
Mixin、関数が表にまとめられています。
こちらのページがあればチートシート要らず!Σ(゚Д゚)

CSS3の確認

CSS3リファレンス – HTMLクイックリファレンス
CSS3のタグやセレクタの確認、各タグの対応ブラウザ確認。

この記事をシェア