CSS Variables (Custom Properties)

\\n\\n\\n\\n

Basic Syntax

\\n\\n

CSS variables are defined using the -- prefix and accessed using the var() function.

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

Syntax	Description
--variable-name	Defines a custom property
var(--variable-name)	Uses the variable value

\\n\\n

Example:

\\n\\n\\n\\n\\n\\n

Global Variables

\\n\\n

Using :root defines variables globally so they are available throughout the entire document.

\\n\\n

\\n

Card using global variables

\\n

\\n\\n\\n\\n

Local Variables

\\n\\n

Variables can also be scoped to specific elements.

\\n\\n

\\n

Local Variable Card

\\n

\\n\\n

The variable --card-color is only available inside the container.

\\n\\n\\n\\n

Fallback Values

\\n\\n

Fallback values are used when a variable is undefined.

\\n\\n

\\nThis text uses a fallback color because --text-color is not defined.\\n

\\n\\n\\n\\n

Updating Variables with JavaScript

\\n\\n

CSS variables can be modified dynamically using JavaScript.

\\n\\n\\n\\n\\n\\n

Using Variables with calc()

\\n\\n

Variables can be used inside calculations.

\\n\\n

\\n\\n\\n\\n

Variables and Inheritance

\\n\\n

\\nParent element defines --text-color\\n\\n

\\nChild element inherits the variable\\n

\\n\\n

\\n\\n\\n\\n

Common Use Cases

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

Use Case	Example
Theme colors	--primary-color
Spacing system	--spacing-sm, --spacing-lg
Typography sizes	--font-size-base
Border radius	--radius
Layout dimensions	--container-width

\\n\\n\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"1536px","height":"2227px"},"children":[]},{"id":"8bc2fe0f-ae2b-413f-93b4-7e777334afdd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"501d225a-a8dd-4e30-8a69-dff252d6cbd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]