SCSS 继承

概览

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

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

  • 自定义 Bootstrap CSS 框架；

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

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

  • 按需加载必要的资源；

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

SCSS 的 !default 指令

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

Example

文件 library.scss
$foo: red;
自定义层.scss
$foo: blue; // -> Don't!

当然，由于编译过程涉及不同相互依赖的捆绑包，错误地重新分配一个变量可能会导致意外的级联结果。

SCSS 提供了多种技术来解决这些问题（例如：shadowing），但 Odoo 中最关键的做法是使用 !default 标志。

当使用 !default 标志时，编译器**仅在**该变量尚未定义时分配一个值。

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

Example

自定义层.scss
$foo: red !default;
文件 library.scss
$foo: blue !default; // -> Already defined, line ignored.
$bar: black !default; // -> Not defined yet, value assigned.
组件.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]

重要

此图不完整，且与当前资产包的组织方式不符。了解更多关于 资产包 的信息。