Trong bài bundle ta thấy web.assets_backend khai cả file .scss. Odoo không viết CSS thô — nó viết SCSS (Sass), một ngôn ngữ biên dịch ra CSS với biến, lồng selector, mixin. Bài này dùng chính SCSS thật của module demo để cho thấy sức mạnh cốt lõi: đổi một biến, đổi cả loạt chỗ dùng nó, và cách chạm tới biến theme của chính Odoo.
Biến và nesting
Module demo có một file SCSS tô màu form thẻ thành viên theo tông "cà phê". Nó dùng đúng hai công cụ nền tảng của Sass — biến ($) và lồng selector:
Hình 1: SCSS thật của module. Biến $ca-phe-nau khai một lần, dùng ở ba chỗ (màu tiêu đề, viền trái, màu tiêu đề nhóm). Nesting: viết .oe_title h1 bên trong .o_quan_form để Sass tự ghép thành .o_quan_form .oe_title h1 — gom style theo khối, khỏi lặp selector cha. Dòng cuối là chuyện ghi đè biến theme, nói ở phần sau.
Một biến, nhiều chỗ — thấy tận mắt
Đây là lý do biến tồn tại. Form thẻ hiện tại tô nâu cà phê:
Hình 2: Trước — tiêu đề "VIP-0003", vạch nhấn, và hai tiêu đề nhóm ("THÔNG TIN THẺ", "ĐIỂM VÀ SỐ DƯ") đều màu nâu #6f4e37, vì tất cả cùng đọc biến $ca-phe-nau.
Giờ mình đổi đúng một dòng — $ca-phe-nau: #6f4e37 thành #1e7d6b (xanh lục bảo) — rồi nâng cấp module:
Hình 3: Sau — tiêu đề, vạch nhấn và cả hai tiêu đề nhóm đồng loạt chuyển xanh. Mình không sờ vào ba selector đó; chỉ đổi một biến, và mọi chỗ dùng nó đổi theo. Đây chính là giá trị của biến: một nguồn sự thật cho màu, thay vì rải #6f4e37 khắp file rồi sửa sót chỗ này chỗ kia.
Ghi đè biến theme của Odoo
Biến của bạn thì bạn tự khai. Nhưng Odoo còn phơi ra biến theme của chính nó — $o-brand-primary (màu nhấn), $o-community-color, dải $o-gray-100..900, $grid-gutter-width... Ghi đè chúng là đổi toàn hệ thống, không chỉ module của bạn.
Có một điều kiện sống còn về thứ tự: biến phải được định nghĩa lại TRƯỚC khi file dùng nó biên dịch. SCSS tính giá trị biến tại thời điểm gặp; nếu file style của Odoo đã dùng $o-brand-primary xong rồi bạn mới ghi đè thì vô nghĩa. Vì thế bản ghi đè phải đặt vào bundle biến, nạp sớm — trong manifest dùng thao tác ('before', path) để chèn file biến của bạn trước các file định nghĩa, hoặc khai vào bundle biến chuyên dụng của theme. Đặt sai thứ tự là ghi đè "không có tác dụng" mà không báo lỗi — họ hàng với cái bẫy bundle ở bài trước.
Vài lưu ý:
- Sửa SCSS phải
-u(hoặc khởi động lại) để biên dịch lại. SCSS không phải CSS tĩnh; Odoo dịch nó ra CSS khi build bundle. - Nesting đừng lồng quá sâu. Ba, bốn cấp là bắt đầu khó đọc và sinh selector quá cụ thể, khó ghi đè về sau.
- Dùng biến của Odoo khi có thể thay cho màu cứng:
$o-gray-200cho viền,$o-brand-primarycho nhấn — giao diện của bạn tự hoà theo theme người dùng chọn.
Ba ý mang về
- Odoo viết style bằng SCSS. Hai công cụ nền tảng: biến (
$ten: giá-trị) khai một lần dùng khắp nơi, và nesting (lồng selector con trong cha) để gom style theo khối. - Đổi một biến, đổi mọi chỗ dùng nó — đã thấy tận mắt: một dòng
$ca-phe-nauđổi màu cả tiêu đề lẫn hai separator. Đó là một nguồn sự thật cho màu, thay cho việc rải mã màu khắp file. - Ghi đè biến theme của Odoo (
$o-brand-primary,$o-gray-*...) đổi màu toàn hệ thống, nhưng phải nạp TRƯỚC file dùng biến (thao tác('before', path)hoặc bundle biến) — sai thứ tự là vô hiệu mà không báo lỗi.
SCSS lo phần nhìn. Phần sau chuyển sang phần khung: QWeb template cho website — dựng một trang web công khai bằng cú pháp QWeb, khác với QWeb của report và của OWL ra sao.
