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 <https://sass-lang.com/documentation/variables#shadowing> _），但在 Odoo 中最关键的过程是使用 !default 标志。

When using the !default flag, the compiler assigns a value only if that variable is not yet defined.

由于这种技术，变量分配的优先级与资源的加载顺序相匹配。

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]

重要

此图表不完整，与当前捆绑包的组织不匹配。详细了解请参阅： 资产捆绑包 。