Biến CSS: custom property, :root và var()

Khai báo và dùng biến CSS

Biến CSS, tên chính thức là custom property, là một thuộc tính có tên bắt đầu bằng --. Khai báo nó một lần, thường trên :root để cả trang kế thừa, rồi đọc nó ở bất kỳ đâu bằng var().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

Sửa --brand thành #16a34a là viền của card và nút cùng đổi màu. Đó chính là mục đích: một giá trị, một chỗ để sửa. Biến cũng kết hợp được với calc(), như padding hai bên của nút cho thấy.

Cú pháp

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

:root khớp với phần tử <html>. Người ta dùng nó thay cho html vì nó có độ ưu tiên bằng một class, và theo quy ước nó báo hiệu "các thiết lập toàn cục".

Phạm vi: ghi đè biến theo từng component

Vì biến được kế thừa, khai báo lại một biến trên một phần tử sẽ đổi giá trị cho phần tử đó và mọi thứ bên trong nó. Quy tắc dùng biến vẫn giữ nguyên.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

Các biến thể chỉ đặt biến, không bao giờ đặt trực tiếp viền. Thêm biến thể thứ tư chỉ tốn một dòng.

Giá trị dự phòng

var(--name, fallback) dùng giá trị dự phòng khi biến chưa được định nghĩa trên phần tử hay bất kỳ phần tử tổ tiên nào. Mọi thứ sau dấu phẩy đầu tiên là giá trị dự phòng, nên bản thân nó có thể chứa dấu phẩy (var(--font, Georgia, serif)), và có thể là một var() khác.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

Đổi biến bằng JavaScript: chuyển giao diện

JavaScript có thể đặt biến trên bất kỳ phần tử nào bằng style.setProperty(). Đặt nó trên document.documentElement (phần tử <html>) là cả trang thay đổi theo. Cách làm phổ biến hơn là bật tắt một class định nghĩa lại các biến:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

Đọc lại giá trị biến bằng getComputedStyle(element).getPropertyValue('--text'). Lưu ý rằng setProperty ghi một inline style lên <html>, thứ này thắng class .dark, nên sau khi nhấn nút thứ hai, màu chữ giữ nguyên ở cả hai giao diện cho tới khi giá trị inline bị gỡ bằng root.style.removeProperty('--text').

Truyền giá trị từ HTML

Một biến trong thuộc tính style là cách gọn gàng nhất để truyền dữ liệu riêng của từng phần tử cho stylesheet. Phần thiết kế nằm trong CSS; HTML chỉ cung cấp một con số.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) biến con số thuần thành phần trăm. Biến cũng có thể thay đổi bên trong media query: @media (min-width: 900px) { :root { --space: 20px; } } khiến mọi khoảng cách đọc --space lớn hơn trên màn hình rộng.

Cái bẫy giá trị không hợp lệ

Trình duyệt không thể biết trước một biến có chứa giá trị hợp lệ cho thuộc tính dùng nó hay không. Khi giá trị không hợp lệ, thuộc tính không quay về khai báo trước đó trong quy tắc. Nó trở thành không hợp lệ tại thời điểm tính giá trị (invalid at computed-value time) và hoạt động như thể được đặt thành unset: thuộc tính kế thừa lấy giá trị của phần tử cha, các thuộc tính khác lấy giá trị ban đầu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

Chữ kế thừa 16px từ <body>, còn border-width quay về giá trị ban đầu là medium, được trình duyệt vẽ thành 3px. Không có biến, một khai báo không hợp lệ bị bỏ qua và khai báo trước nó được giữ lại; có biến thì đã quá muộn để làm vậy. Giá trị dự phòng không giúp được khi biến đã được định nghĩa nhưng sai: dự phòng chỉ dành cho biến chưa được định nghĩa.

Biến CSS và biến Sass

Hai loại này dùng chung được với nhau: nhiều dự án dùng Sass cho logic lúc build và xuất ra biến CSS cho mọi thứ cần đổi giao diện.

Lỗi thường gặp

• Quên hai dấu gạch ngang. var(brand) và --brand khai báo thành -brand đều không hoạt động.
• Dùng biến trong media query. @media (min-width: var(--bp)) không hợp lệ. Điều kiện media cần giá trị cụ thể.
• Tưởng khai báo trước đó vẫn còn khi biến không hợp lệ. Không còn; xem cái bẫy ở trên.
• Ghép đơn vị sai cách. --gap: 10; rồi margin: var(--gap)px không cho ra 10px. Hãy dùng calc(var(--gap) * 1px) hoặc lưu sẵn 10px.
• Khai báo trên sai phần tử. Biến khai báo trên .card không hiển thị với các phần tử anh em hay phần tử cha của nó; hãy khai báo các giá trị dùng chung trên :root.