compassのミックスイン

まず詳しいことは以下の公式リファレンスをご覧ください。英語ではありますが具体的なコード例もでているので、制作の際には重宝するでしょう。

• Compass Core Framework（http://compass-style.org/reference/compass/）

css3関連

css3を使うためには現状では -moz- や -webkit- などのベンダープレフィックスを記述しなければなりません。compassではその手間を軽減して簡単にクロスブラウザを実現することができるミックスインが用意されています。display:inline-blockなど古いブラウザの互換性に注意しなければならないプロパティもサポートされているので、とても助かります。

1. Appearance – Specify the CSS3 appearance property.
2. Background Clip – Specify the background clip for all browsers.
3. Background Origin – Specify the background origin for all browsers.
4. Background Size – Specify the background size for all browsers.
5. Border Radius – Specify the border radius for all browsers.
6. Box – This module provides mixins that pertain to the CSS3 Flexible Box.
7. Box Shadow – Specify the box shadow for all browsers.
8. Box Sizing – Specify the box sizing for all browsers.
9. Columns – Specify a columnar layout for all browsers.
10. Filter – Specify the (image) filter for all browsers.
11. Font Face – Specify a downloadable font face for all browsers.
12. Hyphenation – Mixin for breaking space and injecting hypens into overflowing text
13. Images – Specify linear gradients and radial gradients for many browsers.
14. Inline Block – Declare an element inline block for all browsers.
15. Opacity – Specify the opacity for all browsers.
16. CSS Regions – Specify CSS Regions for supported browsers.
17. Text Shadow – Specify the text shadow for all browsers.
18. Transform – Specify transformations for many browsers.
19. Transition – Specify a style transition for all browsers.
20. User Interface – Declare an element inline block for all browsers.

レイアウト関連

ページレイアウトをサポートするミックスインです。フッタ領域をウィンドウ下部にはりつけるSticky Footerや子要素を親要素全体に拡張するStretchingなどが用意されています。

1. Grid Background
2. Sticky Footer
3. Stretching

リセット関連

いわゆるcssリセットを行うミックスインです。最近ではcssリセットをせずにブラウザスタイルを生かしたデザインも多いですが、compassミックスインの中にはリセットを前提としたものも存在しますので、compassでの製作の際はcssリセットを行う方がいいようです。

1. global-reset
   Based on Eric Meyer's reset 2.0 Global reset rules. For more specific resets, use the reset mixins provided below
2. nested-reset
   Reset all elements within some selector scope. To reset the selector itself, mixin the appropriate reset mixin for that element type as well. This could be useful if you want to style a part of your page in a dramatically different way.
3. reset-box-model
   Reset the box model measurements.
4. reset-font
   Reset the font and vertical alignment.
5. reset-focus
   Resets the outline when focus. For accessibility you need to apply some styling in its place.
6. reset-body
   Reset a body element.
7. reset-list-style
   Reset the list style of an element.
8. reset-table
   Reset a table
9. reset-table-cell
   Reset a table cell (th, td)
10. reset-quotation
    Reset a quotation (q, blockquote)
11. reset-image-anchor-border
    Resets the border.
12. reset-html5
    Unrecognized elements are displayed inline. This reset provides a basic reset for block html5 elements so they are rendered correctly in browsers that don't recognize them and reset in browsers that have default styles for them.
13. reset-display(＄selector, ＄important)

タイポグラフィ

基本的なテキストのスタイリングを行うミックスインで以下のものが含まれます。

• Links リンク（<a>タグ）のスタイリングを行います。hover時にアンダーラインを表示するHover Link、:active、:hoverなどに対応する色を指定するLink colors、リンクのスタイルを消去するUnstyled Linkがあります。
  たとえば今流行りの「親要素全体に広がったリンク」はUnstyled LinkでリセットしてからStrechingを使えば、簡単につくることができるでしょう。
• Lists リスト（<ul>など）のスタイリングを行います。リストバレットをコントロールするBullets、水平に並んだHorizontal ListやInline Block List、Inline Listがあります。
• Text おおざっぱなカテゴリですが、含まれるミックスインはかなり有用なものばかりです。テキストがはみ出たときに省略マークを表示するEllipsis、折り返しをコントロールするForce Wrap、No Wrap、タイトルなどのテキストを画像の置き換えるText Replacementがあります。
• Vertical Rhythm 基準となるライン高を決め、それに沿って縦方向のレイアウトをコントロールするミックスインです。整合性の取れた行送りや文字・ライン高の計算などをサポートしています。横方向のレイアウト整合性をとるのがBlueprintなどのグリッドシステムだとすると、Vertical Rhythmは縦方向を担当します。詳しいことは別のページで説明をします。

1. Links – Tools for styling anchor links.
2. Lists – Tools for styling lists.
3. Text – Style helpers for your text.
4. Vertical Rhythm – Create and maintain a vertical rhythm for your type.

ヘルパー

さまざまなヘルパー関数です。一般的な三角関数などの他、色を扱う関数、画像サイズを返す関数などcss独自の便利な関数が用意されています。

1. adjust-lightness()
2. adjust-saturation()
3. append-selector()
4. color-stops()
5. cos()
6. css2-fallback()
7. e()
8. elements-of-type()
9. enumerate()
10. font-files()
11. font-url()
12. headings()
13. image-width()
14. image-height()
15. image-url()
16. inline-font-files()
17. inline-image()
18. logarithm()
19. nest()
20. pow()
21. prefix()
22. prefixed()
23. pi()
24. sin()
25. sqrt()
26. stylesheet-url()
27. scale-lightness()
28. shade()
29. tan()
30. tint()
31. -css2()
32. -moz()
33. -ms()
34. -o()
35. -pie()
36. -svg()
37. -webkit()

ユーティリティ

コントラストのある色を計算してくれるContrastedや画像スプライトを扱うSprites、テーブルを扱うTablesなど、さまざまなユーティリティが含まれます。

1. Links – Tools for styling anchor links.
2. Lists – Tools for styling lists.
3. Text – Style helpers for your text.
4. Color – Utilities for working with colors.
5. General – Generally useful utilities that don't fit elsewhere.
6. Sprites – Sprite mixins.
7. Tables – Style helpers for your tables.

以上がcompassのコアを構成するミックスインですが、このほかにBlueprintというグリッドシステムフレームワークが含まれています。これについては別のページで説明をしています。