Sass で SXA サイトのスタイルを設定する

概要

Sass を使用して SXA サイトのスタイルを設定します。

Sass (syntactically awesome stylesheets) は CSS の拡張機能です。Sass を使用して SXA サイトのスタイルを設定できます。たとえば、サイトにグローバル スタイルを設定する場合は、特定のスタイルをレンダリング バリアントに適用するか、階層リンクの区切り文字のスタイルを微調整します。

SXA のすべてのテーマには、スタイルを適用するための sass フォルダーが含まれています。Creative Exchange Live は Gulp タスクと連動しており、テーマやその他のコンテンツを変更し、即座に Sitecore 環境に同期できます。Gulp タスクを使用してサイトを変更すると、SXA は Sass ファイルを標準 CSS に自動的にコンパイルします。

Sass でサイトのスタイルを設定するには:

  1. Sass でサイトのスタイルを設定する前に、カスタムテーマを (作成して割り当て、さらに) エクスポートする必要があります。

  2. 選択した宛先に応じて、ZIP ファイルがダウンロード可能になるか、サーバー上のフォルダーにファイルが保存されます。ZIP ファイル オプションを選択した場合は、ZIP ファイルを抽出します。

  3. site/Media/Project/<Tenant>/<Site>/<Your Theme> に移動し、これを Visual Studio Code で開きます。

  4. Visual Studio Code では、統合ターミナルを開くことができます。最初はワークスペースのルートから始まります。ターミナルを開くには、[表示] に移動し、[統合ターミナル] をクリックします。

  5. パッケージをインストールするには、npm と install コマンドを使用し、npm install と指定します。

    注記

    Gulp をインストールする前に、コンピュータに Node.js (Node) がインストールされている必要があります。

  6. これで、Sass ファイルを使い始めることができます。Sass ファイルを保存すると、変更はすぐにテーマに適用されます。sass フォルダーには、次のルート ファイルとフォルダーが含まれています。

    C709E1E03EEC472A9473373CE509E1F2.png

    Sass ファイルまたはフォルダー

    説明

    abstracts

    サイトのグローバル スタイルを設定するすべての Sass ツールとヘルパーが含まれています。ここには、すべてのグローバル変数 (色、フォント サイズ、およびマージン) を配置する必要があります。たとえば、タイトルの色を変更する場合は、次のとおりです。

    8A152B19D6D04ADB865CD549275DB8CE.png

    base

    サイトのボイラープレート コード、タイポグラフィ ルール、および一般的に使用されるHTML要素の標準スタイルを定義するスタイルシートが含まれています。ここに Sass ファイルを配置して、他のレンダリング用のスタイルを追加します。たとえば、すべてのレンダリングのフォント スタイルを設定したり、リンク スタイルを設定したりします。

    199C2C22B9A246198B2ABAB6AA88E44C.png

    スタイル

    特定のレンダリング用のスタイルが含まれています。たとえば、アコーディオン レンダリング用のクラスを追加する場合に使用します。これらのスタイルは、サイト (sitecore/コンテンツ/テナント/サイト/プレゼンテーション/スタイル) の プレゼンテーション フォルダー で使用されているスタイルと同じである必要があります。

    65452D317EBE4AF6AD8614FED0933C2A.png
    3F797E137BC2425AA54477A9C2C19D6E.png

    バリアント

    レンダリング バリアント用の追加のスタイルが含まれています。デフォルトの CSS スタイルを変更して、レンダリング バリアントのスタイルを変更できます。

    F9F1D95814684C248F5E5907BAFD7E65.png

    レンダリング

    独自の .scss パーシャルにあるすべての自己完結型レンダリング。たとえば、マップ レンダリングの最大幅を変更する必要がある場合があります。

    A5AB050CC9CB4981855DEF5AD663EF39.png

    main.scss

    サイトのグローバル スタイルを設定するすべてのスタイリング ファイルをまとめた出力ファイルです。

    D0C71B70D7F34BF99F7C4B61E91D909F.png

    cookie-notification.scss

    Cookie 通知の表示方法を決定します。

    overlay.scss

    サイトでのポップ アップの動作を決定します。