SCSS öröklődés

Áttekintés

Az SCSS eszközök kezelése az Odoo-ban nem olyan egyszerű, mint néhány más környezetben, de rendkívül hatékony.

A modularitás kulcsfontosságú. Az alább leírt öröklési séma lehetővé teszi az Odoo számára, hogy:

• testreszabja a Bootstrap CSS keretrendszert;

• két különböző webkliens dizájnt kezeljen (Közösségi és Vállalati);

• külön kezelje a backend és frontend csomagokat (beleértve a felhasználó weboldalának dizájnját);

• kontekstuálisan csak a szükséges eszközöket töltse be;

• több színsémát kezeljen (pl.: sötét mód);

az SCSS !default direktívája

„Direct variables’ overrides” are technically possible in SCSS but may lead to inconsistent results in complex environments like Odoo.

Example

library.scss

$foo: red;

customization_layer.scss

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

Indeed, since the compilation process acts across different interdependent bundles, re-assigning a variable in the „wrong spot” may lead to unexpected cascading results.

Az SCSS számos technikát kínál ezen problémák megoldására (pl.: shadowing), de a legkritikusabb eljárás az Odoo-ban a !default zászló használata.

A !default zászló használatakor a fordító csak akkor rendel értéket a változóhoz, ha az még nincs definiálva.

Ennek a technikának az eredményeként a változók hozzárendelési prioritása megegyezik az eszközök betöltési sorrendjével.

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;'
}

Lásd még

!default zászló a SASS Dokumentáció oldalon

Odoo SCSS öröklési rendszere

A következő diagram szemlélteti a CSS és SCSS változók definiálásának fordítási sorrendjét.

↓ [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]

Fontos

Ez a diagram hiányos, és nem felel meg a jelenlegi csomagok szervezésének. További információkért olvassa el a eszközcsomagok részt.