SCSS 继承

概述

在 Odoo 中管理 SCSS 资源不像在其他环境中那样简单直接，但它的效率非常高。

模块化是关键。进一步描述的继承机制使 Odoo 能够：

  • 自定义 Bootstrap CSS 框架；

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

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

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

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

SCSS 的 !default 指令

“直接覆盖变量”在技术上是可行的，但在像 Odoo 这样复杂的环境中可能会导致不一致的结果。

Example

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

确实，由于编译过程涉及不同相互依赖的资源包，在“错误的位置”重新赋值变量可能会导致意外的级联结果。

SCSS 提供了多种技术来克服这些问题（例如：遮蔽），但在 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]

重要

此图不完整，且与当前资源包的组织结构不匹配。更多内容请参阅 资源包。