SCSS 继承

概述

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

模块化是关键。下文所述的继承方案使 Odoo 能够：

• 自定义 Bootstrap CSS 框架；

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

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

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

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

SCSS 的 !default 指令

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

示例

library.scss

$foo: red;

customization_layer.scss

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

事实上，由于编译过程会作用于多个相互依赖的资源包，在“错误的位置”重新赋值变量可能导致意料之外的级联结果。

SCSS 提供了若干技术来克服这些问题（例如 shadowing），但在 Odoo 中最关键的做法是使用 !default 标志。

使用 !default 标志时，编译器 仅 在该变量尚未定义时才赋值。

由于这种技术，变量赋值的优先级与资源的加载顺序一致。

示例

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]

重要

此图并不完整，与当前资源包的组织方式不符。更多信息请参阅 资源包。