Khi bạn xây dựng một giao diện lớn, việc dùng lại màu sắc, font-size, khoảng cách là điều chắc chắn. Nếu không có cách tổ chức hợp lý, bạn sẽ phải chỉnh “thủ công” hàng chục nơi nếu chỉ muốn đổi một màu.
CSS Variables (biến CSS) là cách hiện đại để giúp:
- Tái sử dụng giá trị trong toàn bộ file CSS
- Dễ đổi theme, màu sắc, kích thước
- Tổ chức hệ thống thiết kế chuyên nghiệp hơn
1. Khai báo biến trong CSS
Biến được khai báo bằng cú pháp --tên-biến, thường đặt trong :root để dùng toàn cục:
:root {
--primary-color: #3498db;
--font-size-base: 16px;
--spacing: 12px;
}
2. Sử dụng biến
Dùng var(--tên-biến):
body {
font-size: var(--font-size-base);
color: var(--primary-color);
padding: var(--spacing);
}
3. Thay đổi biến theo theme (ví dụ: Dark Mode)
:root {
--bg-color: white;
--text-color: black;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f1f1f1;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
→ Khi bạn đổi data-theme="dark" vào thẻ <html>, toàn bộ website sẽ tự chuyển sang nền tối.
4. Đặt fallback (giá trị dự phòng)
h1 {
color: var(--title-color, #333); /* nếu --title-color chưa khai báo thì dùng #333 */
}
5. Ứng dụng trong hệ thống thiết kế
:root {
--color-primary: #1abc9c;
--color-secondary: #f39c12;
--font-title: 24px;
--font-text: 16px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
}
.button {
background: var(--color-primary);
padding: var(--space-md) var(--space-lg);
font-size: var(--font-text);
}
→ Nếu bạn muốn đổi theme, chỉ cần đổi biến ở :root.
6. Biến cục bộ (chỉ trong 1 phần tử)
.card {
--card-bg: #fff;
background: var(--card-bg);
}
.card:hover {
--card-bg: #f0f0f0;
}
→ Biến này chỉ áp dụng trong .card, không ảnh hưởng toàn site.
7. Ưu điểm của CSS Variables
| Ưu điểm | Lợi ích thực tế |
|---|---|
| Tái sử dụng | Không cần lặp lại cùng một màu nhiều lần |
| Dễ bảo trì | Đổi một lần – hiệu lực toàn bộ giao diện |
| Hỗ trợ theme động | Dùng cho Light/Dark mode dễ dàng |
| Kết hợp với JavaScript | Có thể đọc và đổi biến CSS bằng JS |
8. Lưu ý
- CSS variables cần trình duyệt hiện đại (hầu hết đều hỗ trợ từ lâu)
- Khác với biến SCSS (preprocessor), biến CSS là biến runtime, có thể thay đổi động khi chạy
Thảo luận