CSS Variables

Defines colors, sizes, spacing, font names, or any other scalar CSS value.

---

Definition

Defined with the --name: value; syntax.

--primary: #2060ff;
--radius: 6px;
--font-base: 16px;
--theme: light;

---

Written to :root

These variables are moved to the :root block in the final CSS after compilation. They remain as live CSS custom properties in the browser.

--primary: #2060ff;
--radius: 6px;

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

Generated CSS:

:root {
  --primary: #2060ff;
  --radius: 6px;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

Tip

var(--primary) resolves to a CSS custom property reference, not directly to the value. This is why the value can also be updated at runtime in the browser.

:root.dark is not a scoped override

:root.dark { --primary: ...; } does not work as a runtime theme override. LentyStyle extracts --... declarations inside :root; the last value becomes the global :root value.

--primary: #111;

:root.dark {
  --primary: #eee;
}

The generated CSS does not include :root.dark; --primary becomes #eee under the global :root. For runtime theme overrides, use a normal selector such as html.dark { --primary: #eee; } or body.dark { --primary: #eee; }.

---

Usage in Property Values

--spacing: 8px;
--brand: #2060ff;
--surface: #f4f6fb;

.card {
  padding: var(--spacing);
  background: var(--surface);
  border: 1px solid var(--brand);
}

Generated CSS:

:root {
  --spacing: 8px;
  --brand: #2060ff;
  --surface: #f4f6fb;
}

.card {
  padding: var(--spacing);
  background: var(--surface);
  border: 1px solid var(--brand);
}

Usage Inside Selectors

A value variable can also be used as a selector part. This expansion is done at compile time.

--theme: light;
--primary: #2060ff;

.btn-&var(--theme) {
  color: var(--primary);
}

Generated CSS:

:root {
  --theme: light;
  --primary: #2060ff;
}

.btn-light {
  color: var(--primary);
}

Note

var(--x) expansion inside selectors does not behave dynamically in the browser. It only uses the value at compile time.

Tip

With &var(...), the output of the variable used with & is concatenated without a space with the preceding part in the selector where it is used.

---

Multiple Value Variables

--color-brand: #2060ff;
--color-surface: #f4f6fb;
--color-text: #1a1a2e;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;

.hero {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-lg);
}

.btn {
  background: var(--color-brand);
  color: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
}