SCSS の継承

概要

Odoo で SCSS アセットを管理することは、他の環境ほど簡単ではありませんが、非常に効率的です。

モジュール性が重要です。さらに説明されている継承スキームにより、Odoo は次のことが可能になります:

• Bootstrap CSSフレームワークをカスタマイズします。

• 2つの異なるWebクライアントデザインを処理する (Community and Enterprise);

• ハンドルバックエンドとフロントエンドのバンドル（ユーザーのウェブサイトデザインを含む）

• 文脈上必要な資産のみをロードします;

• 複数の色スキームを扱います (例: dark-mode);

SCSI の !default ディレクティブ

SCSS では技術的に「直接変数の上書き」が可能ですが、Odoo のような複雑な環境では一貫性のない結果をもたらす可能性があります。

Example

library.scss

$foo: red;

customization_layer.scss

$foo: blue; // -> Don't!

実際、コンパイルプロセスは異なる依存するバンドル間で動作するため、「間違った場所」で変数を再割り当てると、予期しないカスケード結果が生じる可能性があります。

SCSS はこれらの問題を克服するためのいくつかのテクニックを提供します(例: shadowing) ですが、Odoo で最も重要なのは、 !default フラグを使用することです。

!default フラグを使用する場合、コンパイラーはその変数がまだ定義されていない場合に only という値を割り当てます。

この技術の結果、変数が割り当てられる優先度は、アセットのロード順序と一致します。

Example

customization_layer.scss

$foo: red !default;

library.scss

$foo: blue !default; // -> Already defined, line ignored.
$bar: black !default; // -> Not defined yet, value assigned.

component.scss

.component {
   color: $foo; // -> 'color: red;'
   background: $bar; // -> 'background: black;'
}

関連項目

SASSドキュメント の !default フラグ

Odoo の SCSS 継承システム

以下の図は、CSS と SCSS 変数が定義されているコンパイル順序を概念的に示しています。

↓ [Compilation starts]
⏐
↓ web.dark_mode_variables
⏐   ├─ Primary Variables
⏐   └─ Components Variables
⏐
↓ web._assets_primary_variables
⏐   ├─ Primary Variables (enterprise)
⏐   ├─ Components Variables (enterprise)
⏐   ├─ Primary Variables (community)
⏐   └─ Components Variables (community)
⏐
↓ web._assets_bootstrap
⏐
↓ web.assets_backend
⏐   ├─ ...
⏐   ├─ CSS variables definition
⏐   └─ CSS variables contextual adaptations
⏐
● [Visual result on screen]

重要

このダイアグラムは不完全で、現在のバンドルの組織と一致しません。詳しくは、 :ref:`asset bundles <reference/assets_bundle> ` を参照してください。