SassでSXAサイトをスタイリングする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sass(構文的に素晴らしいスタイルシート)はCSSの拡張です。Sassを使ってSXAサイトのスタイルを付けることができます。例えば、サイトのグローバルスタイリングを設定したい場合は、レンダリングバリアントに特定のスタイリングを適用したり、パンくずの区切りのスタイリングを調整したりします。
すべてのSXAテーマには、スタイリングを適用するためのsassフォルダが含まれています。 Creative Exchange Liveは 、テーマやその他のコンテンツの変更やSitecore環境への同期を可能にするGulpタスクに対応しています。Gulpタスクでサイトを修正すると、SXAは自動的にSassファイルを標準CSSにコンパイルします。
Sassでサイトをスタイリングするには:
-
選択した宛先によっては、ZIPファイルはダウンロード可能か、サーバー内のフォルダに保存されます。ZIPファイルのオプションを選択した場合は、ZIPファイルを解凍してください。
-
*site/Media/Project///*に移動してVisual Studioコードで開いてください。
-
Visual Studio Codeでは、まずワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、「 ビュー 」に行き、「 統合****ターミナル」をクリックしてください。
-
npmとインストールコマンドを使ってパッケージをインストールしてください: npm install
!注Gulpをインストールする前に、まずNode.js(Node)をインストールしておく必要があります。
-
これでSassファイルの作業を始められます。Sassファイルを保存すると、テーマに変更が即座に適用されます。sassフォルダには以下のルートファイルとフォルダが含まれています:
Sassファイルまたはフォルダ
概要
要旨
サイトのグローバルスタイリングを設定するすべてのSassツールとヘルパーが含まれています。色、フォントサイズ、マージンのグローバル変数はすべてここに入力してください。例えば、タイトルの色を変えたい場合は:
基地
サイトの定型コード、タイポグラフィルール、そしてよく使われるHTML要素の標準スタイルを定義したスタイルシートを含みます。ここにSassファイルを置いて、より多くのレンダリング用のスタイルを追加できます。例えば、すべてのレンダリングのフォントスタイルを設定するか、リンクスタイルを設定することができます。
スタイル
特定のレンダリング用のスタイルを含みます。例えば、アコーディオンレンダリング用のクラスを追加する場合などです。これらのスタイルは、サイトの プレゼンテーション フォルダ(sitecore/Content/Tenant/Site/Presentation/Styles)で使われているスタイルと同じであるべきです。
バリエーション
レンダリングバリアントのための追加のスタイリングが含まれています。デフォルトのCSSスタイルをレンダリングバリアントのスタイリング変更に変更できます。
レンダリング
すべての自己完結型レンダリングはそれぞれ独自の.scss部分的なものになっています。例えば、マップレンダリングの最大幅を変更する必要があるかもしれません:
main.scss
サイトのグローバルスタイルを設定するすべてのスタイリングファイルをまとめる出力ファイルです。
cookie-notification.scss
クッキー通知の表示方法を判断するために。
overlay.scss
ポップアップがあなたのサイトでどのように機能するかを判断するために。