Back to Glossary

CSS Variable

متغير CSS

Beginnercss1 min read
custom propertycss custom property--variablevar()design token
Official DocsSign in to save & take notes

Definition

Reusable values defined in CSS with -- prefix that can be referenced with var(), enabling theming.

قيم قابلة لإعادة الاستخدام تُعرَّف في CSS ببادئة -- ويمكن الرجوع إليها بـvar()، مما يتيح التخصيص.

Why It Matters

Dark mode and theming in 404Fault work by swapping CSS variable values on the :root. Understanding CSS variables helps you add new theme colors without breaking existing ones.

الوضع الداكن والتخصيص في 404Fault يعملان بتبديل قيم متغيرات CSS على :root. فهم متغيرات CSS يساعدك على إضافة ألوان سمة جديدة دون كسر الموجودة.

Full Definition

CSS custom properties (variables) are defined with `--` prefix and accessed with `var()`. They cascade like normal properties and can be changed at runtime (enabling dark mode). `--brand-purple: #8b5cf6` on `:root` makes the color available everywhere. In Tailwind, custom tokens defined in the config become utility classes. On 404Fault, all brand colors and surface colors are CSS variables mapped to Tailwind config.
الخصائص المخصصة في CSS (المتغيرات) تُعرَّف ببادئة `--` وتُصَل بـ`var()`. تتدفق كالخصائص العادية ويمكن تغييرها في وقت التشغيل (مما يتيح الوضع الداكن). `--brand-purple: #8b5cf6` على `:root` يجعل اللون متاحًا في كل مكان.

Example Usage

“:root { --brand-purple: #8b5cf6; } .header { color: var(--brand-purple); }”

“:root { --brand-purple: #8b5cf6; } .header { color: var(--brand-purple); }”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using CSS Variable:

1

Defining variables with the wrong scope — :root is global, local selectors are scoped

2

Forgetting fallback value in var(): `var(--color, #000)` is safer

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using CSS Variable.

Explain:
1. What is CSS Variable and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Defining variables with the wrong scope — :root is global, local selectors are scoped, Forgetting fallback value in var(): `var(--color, #000)` is safer
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account