Biến (Variables) trong CSS

Các biến trong CSS (còn gọi là custom properties) cho phép bạn định nghĩa các giá trị có thể tái sử dụng trong toàn bộ trang web. Bạn đặt tên tùy chỉnh cho thuộc tính (bắt đầu bằng --) và gán giá trị cho nó.

Cú pháp cơ bản

Định nghĩa biến trong pseudo-class :root để có phạm vi toàn cục:

:root {
  --ten-bien: gia-tri;
}

Sử dụng biến với hàm var():

selector {
  thuoc-tinh: var(--ten-bien);
}

Ví dụ minh họa

Đoạn mã sau thay đổi màu nền và màu chữ bằng biến CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --my-bg-color: blue;
      --my-color: white;
    }
    #demo {
      background-color: var(--my-bg-color);
      color: var(--my-color);
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề mẫu</h1>
  <div id="demo">Đây là văn bản demo. Màu nền và màu chữ được điều khiển bởi biến CSS.</div>
</body>
</html>

Lợi ích của biến CSS

• Dễ bảo trì: Thay đổi giá trị ở một nơi áp dụng cho toàn bộ trang.
• Tính nhất quán: Đảm bảo màu sắc, kích thước, font chữ thống nhất.
• Responsive: Có thể thay đổi giá trị biến trong media queries.
• Kế thừa: Biến được kế thừa từ phần tử cha.

Ví dụ nâng cao: Thay đổi theme với media query

:root {
  --bg-color: white;
  --text-color: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}