--- title: "SassでSXAサイトをスタイリングする" slug: "style-sxa-sites-with-sass" abstract: "Sassを使ってSXAサイトのスタイリングをしましょう。" --- # SassでSXAサイトをスタイリングする Sass(構文的に素晴らしいスタイルシート)はCSSの拡張です。Sassを使ってSXAサイトのスタイルを付けることができます。例えば、サイトのグローバルスタイリングを設定したい場合は、レンダリングバリアントに特定のスタイリングを適用したり、パンくずの区切りのスタイリングを調整したりします。 すべてのSXAテーマには、スタイリングを適用するためのsassフォルダが含まれています。 [Creative Exchange Liveは](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/modify-your-site-design-with-creative-exchange-live.html "Modify your site design with Creative Exchange Live") 、テーマやその他のコンテンツの変更やSitecore環境への同期を可能にするGulpタスクに対応しています。Gulpタスクでサイトを修正すると、SXAは自動的にSassファイルを標準CSSにコンパイルします。 Sassでサイトをスタイリングするには: 1. Sassでサイトをスタイリングする前に、まずカスタムテーマ[を作成・](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-a-custom-theme.html "Create a custom theme")[割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/assign-a-theme.html "Assign a theme")・[エクスポート](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/import-and-export-a-web-design-with-creative-exchange.html "Import and export a web design with Creative Exchange")しなければなりません。 2. 選択した宛先によっては、ZIPファイルはダウンロード可能か、サーバー内のフォルダに保存されます。ZIPファイルのオプションを選択した場合は、ZIPファイルを解凍してください。 3. *site/Media/Project///*に移動してVisual Studioコードで開いてください。 4. Visual Studio Codeでは、まずワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、「 **ビュー** 」に行き、「 **統合\*\*\*\*ターミナル**」をクリックしてください。 5. npmとインストールコマンドを使ってパッケージをインストールしてください: npm install > !注Gulpをインストールする前に、まずNode.js(Node)をインストールしておく必要があります。 6. これでSassファイルの作業を始められます。Sassファイルを保存すると、テーマに変更が即座に適用されます。sassフォルダには以下のルートファイルとフォルダが含まれています: ![C709E1E03EEC472A9473373CE509E1F2.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/C709E1E03EEC472A9473373CE509E1F2.png) **Sassファイルまたはフォルダ** **概要** 要旨 サイトのグローバルスタイリングを設定するすべてのSassツールとヘルパーが含まれています。色、フォントサイズ、マージンのグローバル変数はすべてここに入力してください。例えば、タイトルの色を変えたい場合は: ![8A152B19D6D04ADB865CD549275DB8CE.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/8A152B19D6D04ADB865CD549275DB8CE.png) 基地 サイトの定型コード、タイポグラフィルール、そしてよく使われるHTML要素の標準スタイルを定義したスタイルシートを含みます。ここにSassファイルを置いて、より多くのレンダリング用のスタイルを追加できます。例えば、すべてのレンダリングのフォントスタイルを設定するか、リンクスタイルを設定することができます。 ![199C2C22B9A246198B2ABAB6AA88E44C.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/199C2C22B9A246198B2ABAB6AA88E44C.png) スタイル 特定のレンダリング用のスタイルを含みます。例えば、アコーディオンレンダリング用のクラスを追加する場合などです。これらのスタイルは、サイトの **プレゼンテーション** フォルダ(*sitecore/Content/Tenant/Site/Presentation/Styles*)で使われているスタイルと同じであるべきです。 ![65452D317EBE4AF6AD8614FED0933C2A.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/65452D317EBE4AF6AD8614FED0933C2A.png) ![3F797E137BC2425AA54477A9C2C19D6E.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/3F797E137BC2425AA54477A9C2C19D6E.png) バリエーション レンダリングバリアントのための追加のスタイリングが含まれています。デフォルトのCSSスタイルをレンダリングバリアントのスタイリング変更に変更できます。 ![F9F1D95814684C248F5E5907BAFD7E65.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/F9F1D95814684C248F5E5907BAFD7E65.png) レンダリング すべての自己完結型レンダリングはそれぞれ独自の.scss部分的なものになっています。例えば、マップレンダリングの最大幅を変更する必要があるかもしれません: ![A5AB050CC9CB4981855DEF5AD663EF39.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/A5AB050CC9CB4981855DEF5AD663EF39.png) main.scss サイトのグローバルスタイルを設定するすべてのスタイリングファイルをまとめる出力ファイルです。 ![D0C71B70D7F34BF99F7C4B61E91D909F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/D0C71B70D7F34BF99F7C4B61E91D909F.png) cookie-notification.scss クッキー通知の表示方法を判断するために。 overlay.scss ポップアップがあなたのサイトでどのように機能するかを判断するために。