Sử dụng biến trong CSS như thế nào?

Trong CSS, biến (còn được gọi là custom properties) cho phép bạn tái sử dụng các giá trị trên toàn bộ tài liệu CSS của mình, giúp mã nguồn dễ quản lý và cập nhật hơn. Để sử dụng biến trong CSS, bạn cần thực hiện hai bước chính: khai báo biến và sử dụng biến đó.

Khai báo Biến

Biến trong CSS được khai báo bằng cách sử dụng hai dấu gạch ngang (--) trước tên biến. Bạn có thể khai báo biến ở mức độ toàn cục bằng cách đặt chúng trong pseudo-class :root, hoặc ở mức độ cục bộ bên trong bất kỳ selector nào khác.

:root {
  --primary-color: #1e90ff;
  --secondary-color: #ffffff;
}

Trong ví dụ trên, hai biến --primary-color và --secondary-color được khai báo ở mức độ toàn cục, có nghĩa là chúng có thể được sử dụng ở bất cứ đâu trong tài liệu CSS.

Sử dụng Biến

Để sử dụng một biến, bạn sẽ sử dụng hàm var() và truyền vào tên biến. Nếu biến không được tìm thấy, bạn có thể cung cấp một giá trị dự phòng như một tham số thứ hai cho hàm var().

body {
  background-color: var(--primary-color);
}

h2 {
  color: var(--secondary-color);
}

Trong ví dụ trên, background-color của body và color của h2 được thiết lập sử dụng giá trị của các biến đã được khai báo trước đó.

Lợi ích của việc sử dụng Biến trong CSS

• Dễ dàng cập nhật: Khi bạn muốn thay đổi một giá trị được sử dụng ở nhiều nơi, bạn chỉ cần cập nhật giá trị của biến tại một nơi.
• Tính tái sử dụng cao: Biến có thể được sử dụng lại ở nhiều nơi trong tài liệu CSS, giúp giảm lượng mã cần viết và bảo trì.
• Tính linh hoạt: Biến có thể được thay đổi thông qua JavaScript, cho phép bạn tạo ra các hiệu ứng động hoặc tùy chỉnh giao diện người dùng dựa trên hành động của người dùng.

Biến trong CSS là một công cụ mạnh mẽ giúp tối ưu hóa quá trình phát triển web bằng cách giảm thiểu sự lặp lại và tăng cường khả năng bảo trì của mã nguồn.