Hệ thống Flavor trong mini.css

Flavor là cơ chế cốt lõi giúp tùy biến giao diện thông qua Sass, cho phép điều chỉnh biến và mixin để tạo phong cách độc đáo. Mỗi flavor định nghĩa thuộc tính hiển thị như màu sắc, khoảng cách và kiểu chữ.

Các Flavor dựng sẵn

mini.css cung cấp ba flavor mặc định:

• Default Flavor (src/flavors/mini-default.scss) - Chủ đề sáng
• Dark Flavor (src/flavors/mini-dark.scss) - Chủ đề tối
• Nord Flavor (src/flavors/mini-nord.scss) - Bảng màu Nord

Tạo Flavor tùy chỉnh

Bước 1: Chọn mẫu cơ sở

# Sao chép flavor mặc định
cp src/flavors/mini-default.scss src/flavors/flavor-ca-nhan.scss

Bước 2: Cấu trúc tập tin flavor

// Thiết lập cơ bản
$kich-thuoc-phong-chu: 16px;       // Kích thước chữ gốc
$chieu-cao-dong: 1.6;             // Chiều cao dòng
$mau-chinh: #2c3e50;              // Màu chủ đạo
$mau-nen: #ecf0f1;                // Màu nền

// Nhập module
@import '../mini/core';
@import '../mini/layout';

Bước 3: Điều chỉnh biến màu

// Màu cho chủ đề tối
$mau-chinh: #ecf0f1;           
$mau-nen: #2c3e50;            
$mau-phu: #34495e;          
$mau-lien-ket: #3498db;

Tùy biến theo module

Module lõi (src/mini/_core.scss)

Kiểm soát kiểu chữ, bảng màu và khoảng cách cơ bản.

Module bố cục (src/mini/_layout.scss)

$so-cot-luoi: 12;              // Số cột lưới
$diem-man-hinh-nho: 768px;     // Điểm ngắt mobile
$diem-man-hinh-lon: 1200px;    // Điểm ngắt desktop

Thành phần thẻ (src/mini/_contextual.scss)

$chieu-rong-the: 300px;         // Chiều rộng thẻ
$chieu-cao-anh: 180px;          // Chiều cao ảnh trong thẻ

Kỹ thuật nâng cao

Tạo biến thể với Mixin

// Tạo kích thước thẻ tùy chỉnh
@include tao-kich-thuoc-the('nho', 200px);
@include tao-kich-thuoc-the('trung', 400px);

Hệ thống màu sắc

Sử dụng lớp màu có sẵn:

• .mau-chinh - Màu chủ đạo
• .mau-phu - Màu phụ trợ
• .mau-dao - Màu tương phản

Biên dịch và sử dụng

Chuyển đổi Sass sang CSS

# Cài đặt phụ thuộc
npm install

# Biên dịch flavor
node-sass src/flavors/flavor-ca-nhan.scss dist/flavor-ca-nhan.css

Tích vào dự án

<link rel="stylesheet" href="dist/flavor-ca-nhan.css">

Tự động hóa quy trình

"scripts": {
  "build-flavor": "node-sass src/flavors/flavor-ca-nhan.scss dist/flavor-ca-nhan.css --output-style expanded && node-sass src/flavors/flavor-ca-nhan.scss dist/flavor-ca-nhan.min.css --output-style compressed"
}

Tài nguyên hỗ trợ

• Adobe Color - Tạo bảng màu
• Color Hunt - Tổ hợp màu phối hợp
• Trình kiểm tra độ tương phản - Đảm bảo khả năng tiếp cận

Nguyên tắc thiết kế

• Duy trì tỉ lệ tương phản màu đạt WCAG
• Đặt tên biến có ngữ nghĩa rõ ràng
• Xác định trạng thái tương tác (:hover, :active)
• Thiết kế hỗ trợ chế độ tối/sáng