Tương lai của CSS Variables

CSS Variables, hay còn gọi là Custom Properties, đã xuất hiện được một thời gian, nhưng tiềm năng của chúng mới chỉ bắt đầu được khai thác. Khác với biến của preprocessor (Sass/Less), CSS variables là một phần của DOM, nghĩa là chúng có thể được thao tác bằng JavaScript và tuân theo quy tắc cascade.

Tại sao chúng quan trọng

Khả năng cập nhật một giá trị duy nhất và thấy nó lan truyền khắp ứng dụng ngay lập tức là một bước ngoặt cho việc làm theme động (Dynamic Theming).

--primary-color: #6366f1

Cú pháp

Định nghĩa biến rất đơn giản. Thường đặt trong :root để có phạm vi toàn cục.

css

:root {
  /* Design Tokens */
  --primary-color: #6366f1;
  --spacing-unit: 16px;
  --font-stack: 'Inter', sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  font-family: var(--font-stack);
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  filter: brightness(110%);
}

Tương tác với JavaScript

Bạn có thể truy cập và sửa đổi các biến này khi chạy (runtime), điều không thể làm với biến Sass.

javascript

// Lấy style đã tính toán
const root = document.documentElement;
const color = getComputedStyle(root).getPropertyValue('--primary-color');

// Đặt giá trị mới dựa trên input người dùng
function updateTheme(newColor) {
  root.style.setProperty('--primary-color', newColor);
}

Kết luận

Khi sự hỗ trợ của trình duyệt đã phổ biến, không có lý do gì để không sử dụng CSS variables trong dự án tiếp theo của bạn.

Tương lai của CSS Variables

Tại sao chúng quan trọng

Cú pháp

Tương tác với JavaScript

Kết luận

Bài viết liên quan

AI và Lập Trình Viên: Kẻ Hủy Diệt hay 'Cánh Tay Phải' Đắc Lực?

AI vs Lập Trình Viên: Đừng Để 'Robot' Làm Anh Em Mình Sợ!

Laravel 12: Tương lai của Phát triển PHP Hiện đại

Bạn thích bài viết này?