1
HTML/CSSBeginner#css#selectors
HTML/CSSIntermediate#css#variables
What are CSS custom properties (variables) and how do you use them?
Custom properties, declared with -- prefix, store reusable values accessible via var(), often on :root for global scope. They can be overridden per component/media query and updated dynamically via JavaScript, unlike Sass variables which are compile-time only.
Example
:root { --primary-color: #2563eb; --spacing: 16px; }
.button {
background: var(--primary-color);
padding: var(--spacing);
}
@media (max-width: 600px) { :root { --spacing: 8px; } }