Kế thừa SCSS

Tổng quan

Quản lý tài sản SCSS trong SoOn không đơn giản như trong một số môi trường khác nhưng nó mang lại hiệu quả cao.

Tính mô-đun là chìa khóa. Sơ đồ kế thừa được mô tả thêm cho phép SoOn:

  • tùy chỉnh khung CSS Bootstrap;

  • xử lý hai thiết kế webclient khác nhau (Cộng đồng và Doanh nghiệp);

  • xử lý các gói phụ trợ và giao diện người dùng riêng biệt (bao gồm cả thiết kế trang web của người dùng);

  • chỉ tải các nội dung cần thiết theo ngữ cảnh;

  • xử lý nhiều bảng màu (ví dụ: chế độ tối);

Lệnh !default của SCSS

Về mặt kỹ thuật, "Ghi đè biến trực tiếp" có thể thực hiện được trong SCSS nhưng có thể dẫn đến kết quả không nhất quán trong các môi trường phức tạp như SoOn.

Example

library.scss
$foo: red;
customization_layer.scss
$foo: blue; // -> Don't!

Thật vậy, vì quá trình biên dịch hoạt động trên các gói phụ thuộc lẫn nhau khác nhau, việc gán lại một biến ở "sai vị trí" có thể dẫn đến kết quả xếp tầng không mong muốn.

SCSS cung cấp một số kỹ thuật để khắc phục những vấn đề này (ví dụ: shadowing), nhưng quy trình quan trọng nhất trong SoOn là sử dụng !default lá cờ.

Khi sử dụng cờ !default, trình biên dịch chỉ gán một giá trị chỉ nếu biến đó chưa được xác định.

Kết quả của kỹ thuật này là mức độ ưu tiên của các biến được chỉ định phù hợp với thứ tự tải của nội dung.

Example

customization_layer.scss
$foo: red !default;
library.scss
$foo: blue !default; // -> Already defined, line ignored.
$bar: black !default; // -> Not defined yet, value assigned.
thành phần.scss
.component {
   color: $foo; // -> 'color: red;'
   background: $bar; // -> 'background: black;'
}

Xem thêm

Cờ !default trên Tài liệu SASS

Hệ thống kế thừa SCSS của SoOn

Sơ đồ sau đây minh họa một cách khái niệm thứ tự biên dịch trong đó các biến CSS và SCSS được xác định.

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

Quan trọng

Sơ đồ này chưa đầy đủ và không khớp với cách tổ chức của các gói hiện tại. Đọc thêm về gói tài sản.