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

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

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

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

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

画像(クリックで拡大)

PDF

Compass_CheetSheet_1.0.pdf をダウンロード

Compassチートシート更新履歴

バージョン更新日更新内容
1.02017/01/12flexbox追加
使用頻度低めの内容割愛
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のタグやセレクタの確認、各タグの対応ブラウザ確認。

この記事をシェア