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 文档 中的 !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]

Important

此图并不完整，与当前资源包的组织方式也不一致。更多详情请参阅 资源包 文档。