Odoo 主题 SCSS 变量参考
关键加载顺序规则
主题 SCSS 文件在 Odoo 核心变量定义之前加载：
1. YOUR theme's primary_variables.scss (via prepend) ← FIRST
2. Odoo core primary_variables.scss ← SECOND
CONSEQUENCE: CANNOT use map-merge() with core variables!
错误：$o-color-palettes: map-merge($o-color-palettes, (...)); → 未定义变量错误
正确：定义独立变量，不使用 map-merge
1. $o-theme-font-configs — Google Fonts
$o-theme-font-configs: (
'<Font Name>': (
'family': (<CSS font-family list>), // Required
'url': '<Google Fonts query param>', // Required — NOT the full URL!
'properties': ( // Optional: per-context overrides
'<font-alias>': ( '<key>': <value> ),
),
),
);
重要：'url' 键中仅包含查询参数：
// CORRECT
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
// WRONG — do NOT include full URL
'url': 'https://fonts.googleapis.com/css?family=Poppins:300,400,700'
字体粗细格式
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
// Light Light-i Regular Regular-i SemiBold ...
// Number alone = normal, Number + 'i' = italic
多词字体名称
'url': 'Open+Sans:300,300i,400,400i,700,700i'
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700'
字体别名（用于 'properties'）
| 别名 | 映射到 | 用途 |
|---|
'base' | 'font' | 正文 |
'headings' | 'headings-font' | 所有标题 |
'navbar' | 'navbar-font' | 导航 |
'buttons' | 'buttons-font' | 按钮 |
完整示例
$o-theme-font-configs: (
'Poppins': (
'family': ('Poppins', sans-serif),
'url': 'Poppins:300,300i,400,400i,500,500i,600,600i,700,700i',
'properties': (
'base': ( 'font-size-base': (15 / 16) * 1rem ),
),
),
'Playfair Display': (
'family': ('Playfair Display', serif),
'url': 'Playfair+Display:400,400i,700,700i',
),
);
阿拉伯语/RTL 字体
$o-theme-font-configs: (
'IBM Plex Sans Arabic': (
'family': ('IBM Plex Sans Arabic', sans-serif),
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700',
),
'Cairo': (
'family': ('Cairo', sans-serif),
'url': 'Cairo:200,300,400,500,600,700,800,900',
),
);
2. $o-color-palettes — 配色系统
五种语义颜色
| 颜色 | 含义 | 常见用途 |
|---|
o-color-1 | 主色/强调色 | 品牌颜色、按钮、链接 |
o-color-2 | 辅助色 | 强调色、辅助按钮 |
o-color-3 | 浅色背景 | 区块背景、卡片 |
o-color-4 | 白色/最浅色 | 内容背景（#FFFFFF） |
o-color-5 | 深色/文本色 | 标题、页脚、深色区块 |
颜色组合（o_cc1 - o_cc5）
| 类 | 背景 | 用途 |
|---|
o_cc1 | o-color-4（白色） | 主要内容 |
o_cc2 | o-color-3（浅色） | 交替区块 |
o_cc3 | o-color-2（辅助色） | 强调区块 |
o_cc4 | o-color-1（主色） | CTA 区块 |
o_cc5 | o-color-5（深色） | 页脚、深色区域 |
调色板结构
$o-color-palettes: map-merge($o-color-palettes, (
'my-palette': (
'o-color-1': #09294F,
'o-color-2': #FFA807,
'o-color-3': #F6F4F0,
'o-color-4': #FFFFFF,
'o-color-5': #1B212C,
// Component assignments
'menu': 1,
'footer': 5,
'copyright': 5,
// Color combination overrides
'o-cc5-link': 'o-color-4',
'o-cc5-btn-primary': 'o-color-2',
),
));
注意：使用 $o-color-palettes 执行 map-merge 仅适用于非主题模块。主题（使用 prepend）应改用 $o-website-values-palettes，并设置 'color-palettes-name'。
HTML 用法
<section class="o_cc o_cc1 pt32 pb32"></section>
<section class="o_cc o_cc2 pt32 pb32"></section>
<section class="o_cc o_cc5 pt32 pb32"></section>
颜色推导（仅有 2 种颜色时）
o-color-3 = lighten(primary, 45%)
o-color-4 = #FFFFFF
o-color-5 = darken(primary, 40%) or #191A19
3. $o-website-values-palettes — 主配置（115+ 个键）
快速参考
| 类别 | 数量 | 描述 |
|---|
| 排版与字体 | 13 | 字体系列配置 |
| 字体大小 | 13 | 基础和标题字号 |
| 行高 | 11 | 文本间距 |
| 外边距 | 22 | 标题和段落外边距 |
| 按钮 | 17 | 按钮样式 |
| 输入框 | 12 | 表单字段样式 |
| 页眉 | 13 | 页眉/导航配置 |
| 页脚 | 3 | 页脚配置 |
| 链接 | 1 | 下划线行为 |
| 布局 | 3 | 页面布局 |
| 颜色与渐变 | 5 | 调色板和渐变 |
| Google Fonts | 2 | 额外字体加载 |
3.1 排版与字体
| 键 | 描述 |
|---|
'font' | 全站基础字体 |
'headings-font' | H1-H6 字体 |
'navbar-font' | 导航菜单字体 |
'buttons-font' | 按钮文本字体 |
'h2-font' 至 'h6-font' | 各级标题字体 |
'display-1-font' 至 'display-4-font' | 展示文本字体 |
3.2 字体大小
| 键 | 默认值 | 描述 |
|---|
'font-size-base' | 1rem | 基础字号（16px） |
'small-font-size' | 0.875rem | 小号文本（14px） |
'h1-font-size' 至 'h6-font-size' | 计算得出 | 标题字号 |
'display-1-font-size' 至 'display-6-font-size' | 5rem-2.5rem | 展示字号 |
3.3 行高与外边距
| 键 | 默认值 | 描述 |
|---|
'body-line-height' | 1.5 | 正文 |
'headings-line-height' | 1.2 | 所有标题 |
'h2-line-height' 至 'h6-line-height' | 继承 | 各级标题 |
'paragraph-margin-top' | 0 | 段落顶部外边距 |
'paragraph-margin-bottom' | 16px | 段落底部外边距 |
'headings-margin-top' / 'headings-margin-bottom' | 0 / 0.5rem | 标题外边距 |
3.4 按钮（17 个键）
| 键 | 描述 |
|---|
'btn-padding-y' / 'btn-padding-x' | 默认内边距 |
'btn-font-size' | 字体大小 |
'btn-padding-y-sm' / 'btn-padding-x-sm' | 小型按钮 |
'btn-padding-y-lg' / 'btn-padding-x-lg' | 大型按钮 |
'btn-border-width' | 边框粗细 |
'btn-border-radius' / -sm / -lg | 圆角半径 |
'btn-primary-outline' | 将主按钮设为轮廓样式（bool） |
'btn-secondary-outline' | 将次级按钮设为轮廓样式（bool） |
'btn-primary-flat' / 'btn-secondary-flat' | 扁平样式（bool） |
'btn-ripple' | Material 涟漪效果（bool） |
3.5 输入框（12 个键）
| 键 | 描述 |
|---|
'input-padding-y' / 'input-padding-x' | 输入框内边距 |
'input-font-size' | 输入框字体大小 |
'input-border-width' | 边框粗细 |
'input-border-radius' / -sm / -lg | 圆角半径 |
3.6 页眉与导航（13 个键）
| 键 | 值 | 描述 |
|---|
'header-template' | 'default' / 'hamburger' / 'vertical' / 'sidebar' | 页眉布局 |
'header-links-style' | 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom' | 链接样式 |
'header-font-size' | CSS 长度 | 页眉文字大小 |
'logo-height' | CSS 长度 | Logo 高度 |
'fixed-logo-height' | CSS 长度 | 固定时的 Logo 高度 |
'hamburger-position' | 'left' / 'center' / 'right' | 桌面端位置 |
'hamburger-position-mobile' | 'left' / 'center' / 'right' | 移动端位置 |
3.7 页脚（3 个键）
| 键 | 值 | 描述 |
|---|
'footer-template' | 'default' / 'centered' / 'minimalist' / 'links' / 'descriptive' | 布局 |
'footer-effect' | null / 'slideout_slide_hover' / 'slideout_shadow' | 动画 |
'footer-scrolltop' | boolean | 回到顶部按钮 |
3.8 链接与布局
| 键 | 值 | 描述 |
|---|
'link-underline' | 'never' / 'hover' / 'always' | 下划线行为 |
'layout' | 'full' / 'boxed' | 页面布局 |
'body-image' | URL | 背景图片 |
3.9 颜色与渐变
| 键 | 描述 |
|---|
'color-palettes-name' | 当前颜色调色板名称 |
'menu-gradient' | 菜单背景渐变 |
'footer-gradient' | 页脚背景渐变 |
完整示例 — 现代企业主题
$o-website-values-palettes: (
(
'color-palettes-name': 'my-corporate-palette',
// Typography
'font': 'Inter',
'headings-font': 'Inter',
'navbar-font': 'Inter',
'buttons-font': 'Inter',
'font-size-base': 1rem,
'headings-line-height': 1.3,
'body-line-height': 1.6,
// Header
'header-template': 'default',
'header-links-style': 'default',
'logo-height': 48px,
'fixed-logo-height': 36px,
// Buttons
'btn-padding-y': 0.75rem,
'btn-padding-x': 1.5rem,
'btn-border-radius': 8px,
'btn-ripple': true,
// Inputs
'input-padding-y': 0.75rem,
'input-border-radius': 8px,
// Footer
'footer-template': 'default',
'footer-scrolltop': true,
// Links
'link-underline': 'hover',
'layout': 'full',
),
);
字体排版倍数
$o-theme-h1-font-size-multiplier: (64 / 16); // 64px → 4.0
$o-theme-h2-font-size-multiplier: (48 / 16); // 48px → 3.0
$o-theme-h3-font-size-multiplier: (32 / 16); // 32px → 2.0
$o-theme-h4-font-size-multiplier: (24 / 16); // 24px → 1.5
$o-theme-h5-font-size-multiplier: (20 / 16); // 20px → 1.25
$o-theme-h6-font-size-multiplier: (16 / 16); // 16px → 1.0 (FIXED!)
