A CSS variable, also called a custom property, stores a value you can reuse in CSS. For a profile card, one image size can serve several calculations, while shared colors, fonts, and backgrounds keep the styling consistent. section 6.2
Define one inside a CSS rule with a name beginning `--`, a colon, and a value: `--imageSize: 200px;`. Use it in another declaration with `var(--imageSize)`. Properties defined on `body` are available to the body and its descendants. The value need not be a color: it can also be a size, font family, or gradient. section 6.2
Listing 6.2 Defining CSS custom properties
body {
--primary: #de3c4b; #1
--primary-contrast: white;
--secondary: #717777; #2
--font: Helvetica, Arial, sans-serif;
--text-color: #2D3142; #3
--card-background: #ffffff;
--technologies-background: #ffdadd;
--page-background: linear-gradient(#4F5D75, #2D3142);
--imageSize: 200px;
background: var(--page-background);
font-family: var(--font);
color: var(--text-color);
}
See several custom properties defined together on `body`, then used for its background, font family, and text color. section 6.2
A form error color
A form can define `--error: #dd1c1aff;` and use `.error { color: var(--error); }`. The same value can color an invalid field’s border. Pair the red error text with an icon or other cue: color alone may not make the message clear to everyone. section 10.1 section 10.8
CSS custom properties are not the same as Sass variables. Sass uses `$name` and handles variables at compile time; custom properties are dynamic and participate in CSS inheritance. In a comparison where a custom property is reassigned on `body`, both paragraphs receive its later border value, while earlier uses of a Sass color retain their original value. section 12.2
