@import
を介してスタイルを接続すると、パフォーマンスに悪影響を及ぼすため、純粋なCSSにはモジュール性がありません。
これらの問題の解決策はCSSプリプロセッサーで見つかりました。その助けにより、変数の使用、コード内での数学計算の実行、ミックスインと継承を使用したコードの再利用が可能になりました。 プリプロセッサのイデオロギーは、コンテキストによるスタイルファイルの論理的な分離に基づいています-モジュール性の問題は解決されました。 もちろん、プラスはチーム内でのコード競合のリスクを減らすことです。コード内のナビゲーションははるかに便利になります。 また、プリプロセッサではループを使用してコードを生成できるようになりました。SASSでは次のようになります。
/* SCSS */ $animals: puma, sea-slug, salamander; @each $animal in $animals { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }
/* CSS */ .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }
または：
/* SCSS */ @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
/* CSS */ .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
コンパスについて少し
コンパスは単なるCSSプリプロセッサではなく、コンパス開発者はそれを設計フレームワークとして位置付けています。 CompassはSASS構文（.sassまたは.scss）を使用するため、SASSコードはすべてCompassにコンパイルされます。
Compassの主な概念の1つは、スタイルサポートのモジュール化と簡素化です。これにより、スタイル設定に集中し、古いブラウザーのサポートに最小限の労力で済むため、Compassは幅広い機能を備え、ほとんどのCSSフレームワークで動作します。
-画像、CSS3、フォント、レイアウトを操作するための膨大な数のビルトインミックスイン。
-リスト、テーブル、リンクなどの基本要素の色、スプライト、および定型化を操作するためのユーティリティ。
-組み込みのCSSリセット。
-normalize.css;
-HTML5ボイラープレート、ブループリント、Twitterブートストラップ。
-グリッドシステム（Fluid 960、Singularity、960.gs、Susy、Zenグリッドなど）
-ウィジェット（派手なボタン、生意気なボタン）;
CSS3 PIE
カテゴリ別のコンパスミックスインのリスト、コンパスモジュールのより包括的なリストはこちら 。
コンパスの使用を開始する方法
CompassはRubyで記述され、gemパッケージマネージャーからインストールされます（インストールされたRubyが必要です）。
$ gem update --system $ gem install compass $ compass create <myproject> /* compass */ $ compass watch [path/to/compass-project] /* Compass [path/to/compass-project]*/
Scout 、 Compass.app-コマンドラインを台無しにしたくない人向け。
Compass拡張機能のインストールも非常に簡単です。
1.拡張機能をインストールします。
$ gem install {extension}
2. Compassプロジェクトのconfig.rbファイルの先頭に追加します。
require '{extension}'
3.拡張機能を接続します。
@import '{extension}';
Compassを実際に使用する利点を見てみましょう。
自動生成されたスプライト
開発段階では、多くの場合、スプライトを更新する必要があり、ほとんどの場合、このルーチンアクションは手動で実行されます。 コンパスはスプライトを生成するための異なるアプローチを提供します-画像をスプライト変数にマッピングします（http://compass-style.org/reference/compass/helpers/sprites/）：
/* SCSS */ $arrows: sprite-map("arrows/*.png"); // arrows
または、非標準設定でスプライトを宣言できます：
/* SCSS */ /* : vertical( ), horizontal, diagonal, smart */ $<arrows-dirname>-layout: smart; $arrows: sprite-map("<arrows-dirname>/*.png", $position: 100%, $spacing: 25px, /* */ $arrows-arrow-down-spacing: 10px /* <arrows-dirname>/arrow-down.png */ );
スプライトミックスインを使用して、$アイコンスプライト変数をbackgroundプロパティで使用できるようになりました。
/* SCSS */ background: sprite($arrows, arrow-down) no-repeat;
/* CSS */ background: url('/<arrows-dirname>/arrow-down.png?12345678') 0 -24px no-repeat;
新しい画像を<arrows-dirname>フォルダーに追加すると、Compassはスプライトを再生成します。背景の位置を気にする必要はありません-Compassは必要な値を置き換えて、対応する画像を表示します。
フォントとサイズを操作するのに便利
コンパスは便利なフォントツールです。
CSSでは、カスタムフォントの追加は次のようになります。
/* CSS */ @font-face { font-family: "PacificoRegular"; src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot'); src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot'), url('[project-root]/fonts/pacifico/Pacifico-webfont.woff') format('woff'), url('[project-root]/fonts/pacifico/Pacifico-webfont.ttf') format('truetype'), url('[project-root]/fonts/pacifico/Pacifico-webfont.svg') format('svg'); }
組み込みのコンパスフォントフェイスミックスインを使用した例：
/* SCSS */ @include font-face("PacificoRegular", font-files( "pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg" ), "pacifico/Pacifico-webfont.eot" /* .eot IE */ );
フォントサイズとしてemsを使用することは、数学的な計算が追加されるため、CSSで常に最も楽しいとは限りませんが、Compassはフォントの操作を容易にします。
/* SCSS */ $base-font-size: 14px; /* */ div{ @include adjust-font-size-to(28px); /* @adjust-font-size-to() - */ h1 { @include adjust-font-size-to(32px, $from-size: 28px); /* $from-size em */ } }
/* CSS */ body { font-size: 0.875em; // 0.875 * 16px = 14px } div { font-size: 2em; // 2 * 14px = 28px } div h1 { font-size: 1.143em;// 1.143 * 28px = 32px }
emを使用する場合は、フォントの継承を避ける方が良いですが、上記の例は、Compassで同様の状況に対処する方法を示しています。
Compassは、Vertical Rhythmsでも機能します（ Vertical Rhythmsについての詳細 ）。
ベンダープレフィックス
コンパスのビルトインミックスインは、ベンダープレフィックス生成をサポートします。 例：
/* SCSS */ .round { @include border-radius(4px); }
/* CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
プレフィックスを設定することが可能です：
/* SCSS */ $experimental-support-for-mozilla : true; // !default; $experimental-support-for-webkit : true; // !default; $support-for-original-webkit-gradients : true; // !default; $experimental-support-for-microsoft : true; // !default; $experimental-support-for-opera : false; $experimental-support-for-khtml : false; .round { @include border-radius(4px); }
/* CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; }
勾配
グラデーションを操作するために、Compassには2つの組み込み線形グラデーションと放射状グラデーションミックスインがあり、これらはバックグラウンドイメージまたはバックグラウンドミスキンと組み合わせて使用されます。
/* SCSS */ @import "compass/css3/images"; @import "compass/utilities/general/hacks"; /* @filter-gradient */ .item { /* IE, @linear-gradient IE */ @include filter-gradient(#aaaaaa, #eeeeee); /* Fallback: */ background: #cccccc; /* CSS3 c */ @include background(linear-gradient(top, #aaaaaa, #eeeeee)); }
/* CSS */ .item { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')"; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE'); background: #cccccc; /* */ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee)); background: -moz-linear-gradient(top, #aaaaaa, #eeeeee); background: -o-linear-gradient(top, #aaaaaa, #eeeeee); background: linear-gradient(top, #aaaaaa, #eeeeee); }
グラデーションを使用する別の例 。
メディアクエリ
コンパスには、メディアクエリを操作するための非常に便利なブレークポイントモジュールがあります。 ブレークポイントを使用すると、1ブロックのスタイルでメディアクエリを収集できます。これにより、構造化されコードの可読性が向上します。
/* SCSS */ $small: 543px; $medium: 794px; $fence-sm: $small $medium; #foo { content: 'No Media Queries'; @include breakpoint($small) { content: 'Small Media Query'; } @include breakpoint($fence-sm) { content: 'Fenced Media Query'; } }
/* CSS */ #foo { content: 'No Media Queries'; } @media (min-width: 543px) { #foo { content: 'Small Media Query'; } } @media (min-width: 543px) and (max-width: 794px) { #foo { content: 'Fenced Media Query'; } }
AND、ORロジックを使用したより複雑なクエリの例：
/* SCSS */ $print-land: print monochrome (orientation landscape); $fenced-landscape: screen 321px 543px, handheld (orientation portrait); /* screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) */ #foo { @include breakpoint($print-land) { content: 'Monochrome Print in Landscape'; } @include breakpoint($fence-landscape) { content: 'Screen media type between 300px and 500px or Handheld media type in Portrait'; } }
/* CSS */ @media print and (monochrome) and (orientation: landscape) { #foo { content: 'Monochrome Print in Landscape'; } } @media screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) { #foo { content: 'Screen media type between 321px and 543px or Handheld media type in Portrait'; } }
まとめ
Compassは、効率的でクロスブラウザのCSSコードをすばやく作成するのに役立つ強力な開発者ツールです。 また、Compassはブラウザでのラピッドプロトタイピングに便利なツールであり、LiveReloadと連携して機能することにも注意してください。
Compassは単なるツールであることを忘れないでください。しかし、その巧妙な使用は印象的な結果をもたらし、多くの日常的な作業を排除します。