Успадкування SCSS

Огляд

Керування активами SCSS в Odoo не таке просте, як у деяких інших середовищах, але дуже ефективне.

Модульність є ключовою. Описана далі схема успадкування дозволяє Odoo:

  • налаштувати CSS-фреймворк Bootstrap;

  • обробляти два різні дизайни веб-клієнтів (Community та Enterprise);

  • окремо обробляти пакети бекенду та фронтенду (включно з дизайном веб-сайту користувача);

  • контекстно завантажувати лише необхідні ресурси;

  • обробляти кілька колірних схем (наприклад: темний режим);

Директива !default у SCSS

«Перевизначення прямих змінних» технічно можливе в 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;'
}

Перегляньте також

Прапорець !default у SASS документація

Система успадкування SCSS в Odoo

На наступній діаграмі концептуально показано порядок компіляції, в якому визначені змінні 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]

Важливо

Ця діаграма неповна та не відповідає поточній організації пакетів. Докладніше див. на asset bundles.