SCSS繼承?

概覽?

在Odoo中管理SCSS資源并不像在其他環境中那樣直接，但它非常高效。

模塊化是關鍵。進一步描述的繼承方案允許Odoo：

  • 自定義 Bootstrap CSS 框架；

  • 處理兩種不同的Web客戶端設計（社區版和企業版）；

  • 分別處理后端和前端的捆綁包（包括用戶網站的設計）；

  • 上下文加載必要的資源；

  • 處理多個顏色方案（例如：暗模式）；

SCSS的 !default 指令?

在 SCSS 中，”直接變量覆蓋” 技術上是可行的，但在像 Odoo 這樣的復雜環境中可能會導致不一致的結果。

Example

library.scss?
$foo: red;
customization_layer.scss?
$foo: blue; // -> Don't!

實際上，由于編譯過程跨越不同的相互依賴的包，因此在“錯誤的位置”重新分配變量可能會導致意外的級聯結果。

SCSS提供了幾種技術來克服這些問題（例如： shadowing），但在Odoo中最關鍵的過程是使用 !default 標志。

當使用 !default 標志時，編譯器僅在該變量尚未定義時才分配一個值。

由于這種技術，變量分配的優先級與資源的加載順序相匹配。

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;'
}

另請參閱

!default 標記在 SASS 文檔 上

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]

重要

這張圖不完整，與當前的資源包組織不符。請參閱： 資源包 了解更多信息。