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òn...