SCSS继承

概述

在 Odoo 中管理 SCSS 资产并不像在其他环境中那样简单，但效率很高。

模块化是关键。进一步描述的继承方案允许 Odoo ：

  • 定制Bootstrap CSS框架；

  • 处理两种不同的网络客户端设计（社区和企业）；

  • 分别处理后端和前端捆绑（包括用户的网站设计）；

  • 仅根据上下文加载必要的资源；

  • 处理多种颜色方案（例如：深色模式）；

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

其他资料

SASS Documentation 上的 !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]

重要

该图不完整并且与当前捆绑包的组织不匹配。了解更多有关 asset bundles 的信息。