Sass vs. Compass – レビュー

compass は sass 用のツールライブラリです。
compass は、sass の機能を補完し、強化するために、sass に基づいた一連の便利なモジュールをカプセル化します。

インストール:
compass は Ruby 言語で開発されているため、インストールする前に Ruby をインストールする必要があります。
コマンド:

gem install compass
プロジェクトの初期化:
Compassプロジェクトを作成するには、プロジェクト名がmyprojectの場合
compass create myproject
は、config.rbファイルを含むこのディレクトリを現在のディレクトリに生成します。 2 つのサブディレクトリ、sass と stylesheet には sass ソース ファイルが保存され、後者にはコンパイルされた
css ファイルが保存されます。

コンパイル:
私が開発中に書いたのは、ファイル拡張子が scss のファイルでした。 CSS ファイルにコンパイルされた場合のみ、Web サイトで使用できます。
compass のコンパイル コマンドは
compass apply
です。このコマンドはプロジェクトのルート ディレクトリで実行され、sass サブディレクトリにある scss ファイルを css ファイルにコンパイルし、stylesheets サブディレクトリに保存します。
デフォルトでコンパイルされる CSS ファイルには、多くのコメントが含まれています。本番環境では、圧縮された CSS ファイルが必要です。
compass COMPILE --output-style COMPLEX
未変更のファイルを再コンパイルする場合は、
compass COMPILE --force
コマンド パラメーターの使用に加えて、構成ファイル config.rb でコンパイル モードを指定することもできます。

output_style = :expanded
:expanded は、コンパイル後に元の形式を保持することを意味します。その他の値には、nested、
:compact、compressed が含まれます。本番段階に入ったら、:compressed モードに変更する必要があります。
output_style = :compressed
環境値 (:production または :development) を指定することで、コンパイル モードをインテリジェントに決定することもできます。

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

コマンドラインモードでは、ワンタイムコンパイルコマンドに加えて、compass には自動コンパイルコマンドもあります

compass watch
のみscss ファイル 変更が発生すると、自動的に css ファイルにコンパイルされます。

compassのモジュール

compassはモジュール構造を採用しており、異なるモジュールが異なる機能を提供し、5つのモジュールが内蔵されています。
css3 レイアウト タイポグラフィーユニリティをリセット

モジュールをリセット

独自のスタイルを作成する前に、ブラウザのデフォルトのスタイルをリセットする必要があります。
書き方は以下の通りです:
@import "compass/reset"
上記の@importコマンドはロードモジュールの指定に使用されており、ここではリセットモジュールをロードしています。コンパイル後、対応する CSS リセット コードが生成されます。

CSS3 モジュール
このモジュールは 24 個の css3 コマンドを提供します。例:
角丸(border-radius)と書いてあり、
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
上記の@includeコマンドは、あるmixinを呼び出すことを意味します(C 言語のマクロと同様)、5px はフィレットの半径を指定するために使用されるパラメータです。

コンパイルされたコードは次のとおりです:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px ;
-khtml-border-radius: 5px;
border-radius: 5px;
}

左上の角だけを丸める必要がある場合の書き方は
@include border-corner-radius(top, left , 5px);

レイアウトモジュール
このモジュールは、レイアウト機能を提供します。
例えば、指定したページのフッター部分がブラウザの下部に表示されます。
@import "compass/layout";
#footer {
@include Sticky-footer(54px);
}
子要素が親要素のスペースを占めるように指定します:

@import "compass/layout";
#stretch- full {
@includestretch;
}
タイポグラフィモジュール
このモジュールはテンプレート機能を提供します
たとえば、リンクの色を指定するためのミックスインは次のとおりです:
link-colors($normal, $hover, $active, $visited , $focus);
使用する場合は、
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
と書きます。 }

ユーティリティモジュール

このモジュールは、他のモジュールに属さない特定の機能を提供します。
例: フローティングをクリア:

import "compass/utilities/";
.clearfix {
@include clearfix;
}
例: table:
@import "compass/utilities";
table {
@include table -scaffold;
}

コンパイル後
table th {
text-align: center;
font-weight:大胆;
}
table td,
table th {
padding: 2px;
}
table td.numeric,
table th .numeric {
text-align: right;
}

ヘルパー関数
モジュールに加えて、compass は一連の関数も提供します。
いくつかの便利な関数があります。image-width() と image-height() は画像の幅と高さを返します。
別の例では、inline-image() は画像をデータプロトコルデータに変換できます。

@import "compass";
.icon {background-image: inline-image("icon.png");}

コンパイル後、
.icon {background-image: url('data:image/ png;base64,iBROR...QmCC');}
関数と mixin の主な違いは、@include コマンドを使用する必要がなく、直接呼び出すことができることです。

Sass と Compass について詳しく知りたい場合は、関連記事を確認するには、PHP 中国語 Web サイトに注目してください。