この記事では主に Compass の内容について説明します。ご存知のとおり、Compass は Sass のツール ライブラリです。Sass について詳しくない場合は、Sass の Sass の章に進んでください。Sass 自体は単なるコンポーネントです。 「CSS プリプロセッサ」。Compass はこれに基づいて、Sass の機能を補完する一連のモジュールとテンプレートをカプセル化します。
Sass と同様に、Compass も Ruby 言語で開発されているため、Sass をインストールする前に Ruby をインストールする必要があります。Ruby をインストールした後は、コマンドラインで次のコマンドを直接入力できます。 リーリー
cmdにWindowsを入力していますが、前のsudoは省略する必要があります。通常の状況では、Compass (Sass とともに) がインストールされます。
2.Compass はプロジェクトを初期化します
と入力します。 リーリー
learn-compass-init サブディレクトリが現在のディレクトリに生成されます (ヒント: Windows プレーヤーは、作成する必要があるファイル上で Shift キーを押しながらマウスを右クリックして、ここでコマンド ライン ウィンドウを開くことができます)。作成したばかりのサブディレクトリを入力してください
リーリー
次の構造が表示されます。config.rb ファイルはプロジェクト構成ファイルです。 sass と stylesheet という 2 つのサブディレクトリもあります。前者には作成する必要がある Sass ソース ファイルが保存され、後者にはコンパイルされた CSS ファイルが保存されます。
リーリー
Sass サブディレクトリ内のサフィックス名を持つ scss ファイルは、css ファイルにコンパイルされ、stylesheets サブディレクトリに保存されます。scssファイルを修正するためにcompassコンパイルを一度実行するのは面倒だという人もいるでしょう。そのため、compassは以下のような自動コンパイルコマンドも提供しています
リーリー
このコマンドの実行後、scss ファイルが変更されている限り、stylesheets サブディレクトリ内の対応する css ファイルに自動的にコンパイルされます。デフォルトでは、コンパイルされた CSS ファイルには多くのコメントが含まれますが、この場合は、次のコマンドを使用する必要があるだけです
。 リーリー
4.コンパスのモジュールCompass には以下を含む 6 つの組み込みモジュールがあります
リーリー
リセットモジュール：ブラウザの違いを減らす、つまりブラウザ間の違いをリセットするブラウザリセットモジュールです。レイアウト モジュール: ページ レイアウトを制御する機能を提供します。たとえば、コンテナ内のサブ要素を水平方向と垂直方向に埋めることができます。
インポートのために明示的に指定する必要があるのは Reset モジュールと Layout モジュールのみであることに注意してください。つまり、 @import "compass" が使用されている限り他のモジュールもインポートできます。
css3 モジュール: クロスブラウザー CSS3 機能を提供します。ブラウザーのプレフィックスを追加することで、使用後に頭が痛くなることはないと思います。
Helpers モジュール: Sass の関数リストによく似た一連の関数が含まれています (めったに使用されませんが、非常に強力です)。
タイポグラフィモジュール: テキストのスタイルと垂直方向のリズムを変更します。
ユーティリティモジュール: Compass は他のモジュールに配置できないすべてのコンテンツをこのモジュールに配置していると言えます。
実際、Compass は Browser Support メソッドも提供します。これは主に、Compass がデフォルトでサポートするブラウザと、指定されたブラウザのどのバージョンがデフォルトでサポートされるかを設定するために使用され、変更されると、他の 6 つのモジュールの出力に影響します。さまざまなブラウザに合わせてカスタマイズする必要があり、さまざまな適応を行う必要があります。
各モジュールの使い方や特徴については、以下の記事で一つずつ解説していきます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
