CSS / CSS Custom property (variable)

CSS Custom property (variable)

CSS Custom property нь CSS-д өөрийн гэсэн хувьсагч тодорхойлох боломжийг олгоно. Нэг утгыг олон газар ашигладаг бол variable ашиглах нь засахад, дахин ашиглахад хавьгүй хялбар болгоно.

Зарлах ба ашиглах

Custom property -- давхар зураасаар эхэлнэ:

css

/* Зарлах */
.card {
  --card-bg: #0f172a;
  --card-radius: 12px;
}

/* Ашиглах */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
}

:root selector — глобал variable

:root нь HTML баримтын хамгийн дээд элемент (<html>)-ийг сонгоно. Энд тодорхойлсон variable бүх хуудсанд хүртээмжтэй байна:

css

:root {
  /* Өнгө */
  --color-bg: #0b1120;
  --color-surface: #0f172a;
  --color-elevated: #1e293b;
  --color-border: #1e293b;

  --color-text: #f1f5f9;
  --color-muted: #94a3b8;
  --color-dim: #475569;

  --color-primary: #a78bfa;
  --color-success: #4ade80;
  --color-danger: #f87171;

  /* Хэмжээ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Зай */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Фонт */
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
}

var() — ашиглах ба fallback утга

css

.button {
  background: var(--color-primary);

  /* Fallback: variable байхгүй бол ашиглах утга */
  color: var(--color-text, #f1f5f9);

  /* Давхарласан fallback */
  border: 1px solid var(--color-border, var(--color-elevated, #1e293b));
}

Компонент дотор override хийх

Global variable-г компонент дотор override хийж болно:

css

:root {
  --color-primary: #a78bfa; /* нил ягаан */
}

/* Энэ компонент дотор өөр утга */
.danger-zone {
  --color-primary: #f87171; /* улаан */
}

.danger-zone .button {
  background: var(--color-primary); /* улаан болно */
}

Dark / Light theme

css

:root {
  --bg: #ffffff;
  --text: #1e293b;
  --surface: #f8fafc;
}

[data-theme="dark"] {
  --bg: #0b1120;
  --text: #f1f5f9;
  --surface: #0f172a;
}

body {
  background: var(--bg);
  color: var(--text);
}

.card {
  background: var(--surface);
}

html

<body data-theme="dark">
  ...
</body>

JavaScript-ээр CSS variable өөрчлөх

JavaScript нь CSS custom property-г унших ба бичих боломжтой:

javascript

// Унших
const root = document.documentElement;
const primary = getComputedStyle(root).getPropertyValue("--color-primary");
console.log(primary); // " #a78bfa"

// Бичих — бүх хуудсанд нөлөөлнө
root.style.setProperty("--color-primary", "#4ade80");

// Тодорхой элементэд
const card = document.querySelector(".card");
card.style.setProperty("--card-bg", "#1e293b");

Жишээ — theme toggle товч:

javascript

const toggleBtn = document.getElementById("theme-toggle");

toggleBtn.addEventListener("click", () => {
  const current = document.documentElement.getAttribute("data-theme");
  document.documentElement.setAttribute(
    "data-theme",
    current === "dark" ? "light" : "dark",
  );
});

Бодит жишээ — бүрэн компонент системтэй

css

:root {
  --btn-bg: #7c3aed;
  --btn-hover: #6d28d9;
  --btn-text: #ffffff;
  --btn-radius: var(--radius-md);
  --btn-padding: var(--space-2) var(--space-4);
  --btn-font: var(--font-base);
}

.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--btn-hover);
}

/* Variant — зөвхөн variable-г override хийнэ */
.btn-danger {
  --btn-bg: #dc2626;
  --btn-hover: #b91c1c;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-hover: #1e293b;
  --btn-text: #a78bfa;
}

html

<button class="btn">Үндсэн</button>
<button class="btn btn-danger">Устгах</button>
<button class="btn btn-ghost">Цуцлах</button>

Дараагийн хичээлд:

Specificity ба cascade-ийн дүрмийг судална. Яагаад зарим CSS дүрэм нөгөөгөө дарж, зарим нь үгүй болдгийг тооцооллоор ойлгоно.

← Өмнөх хичээлPseudo-element (::before, ::after)Дараах хичээл →Specificity ба cascade