1. Creative Exchangeの操作

SassでSXAサイトをスタイリング

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sass(構文的に素晴らしいスタイルシート)は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では、最初はワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、Viewに移動してIntegratedTerminalをクリックします。

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

    メモ

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

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

    Sass file or folder

    Description

    抄録

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

    基

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

    スタイル

    特定のレンダリングのスタイルが含まれます(たとえば、アコーディオンレンダリングのクラスを追加するため)。これらのスタイルは、サイトのPresentationフォルダ (sitecore/Content/Tenant/Site/Presentation/Styles) で使用されているスタイルと同じである必要があります。

    バリアント

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

    レンダリング

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

    main.scss

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

    cookie-notification.scss

    Cookie通知の表示方法を決定するため。

    overlay.scss

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

この記事を改善するための提案がある場合は、 お知らせください!