Syntax

variable

CSS variables defined specific values to be reused throughout a document.

Class	Declarations
$custom:`value`	--custom: `value`;

Examples

Use $name:* to assign a CSS custom property from the class string.

<button class="$button-bg:red bg:$(button-bg)">    Custom property</button>

Generated CSS

@layer utilities {    .\$button-bg\:red {        --button-bg: red    }}

Assume this is your custom element and its tree:

<test-element>    #shadow-root (open)        <button part="button"></button></test-element>

and the element contains an encapsulated style like this:

:host {    --button-bg: red;}[part=button] {    background: var(--button-bg);}

Elements in the shadow DOM cannot be selected via descendant selectors, but you can:

<test-element class="$button-bg:red $button-bg:pink@sm">    #shadow-root (open)        <button part="button"></button></test-element>

Use variables for values that are consumed by custom component CSS.

<div class="$size:2.5rem">    Component reads var(--size)</div>

Apply styles based on different states using selectors and conditional queries.

<div class="$size:2.5rem:hover $size:3rem@sm $size:0@print">...</div>

Controlling whether the user can select text.

Setting vertical alignment.