@property
Here’s an example from an excellent CSS Tricks article.
@property --spacing {
syntax: "<length>" |;
initial-value: 20px;
inherits: true;
}
.container {
display: flex;
gap: var(--spacing); /* Initial value: 20px */
padding: var(--spacing); /* Initial value: 20px */
}
And also from CSS Tricks here’s a table of all the different syntax values you can use.
| Name | Description | Example |
|---|---|---|
"*" |
Universal syntax definition, aka any value | --my-prop: random |
"<length>" |
Any valid length value | --my-prop: 100px |
"<number>" |
Any valid number value | --my-prop: 3.14 |
"<percentage>" |
Any valid percentage value | --my-prop: 50% |
"<length-percentage>" |
A valid percentage, length, or any valid calc() function combining them | --my-prop: calc(10% + 5px) |
"<color>" |
Any valid color value | --my-prop: blue |
"<image>" |
Any valid image value, such as a URL or a color gradient | --my-prop: linear-gradient(blue, red) |
"<url>" |
Any valid URL value | --my-prop: url("http://www.example.com/") |
"<integer>" |
Any valid integer value | --my-prop: 10 |
"<angle>" |
Any valid angle value | --my-prop: 30deg |
"<time>" |
Any valid time value | --my-prop: 250ms |
"<resolution>" |
Any valid resolution value | --my-prop: 2dppx |
"<transform-function>" |
Any valid transform function value | --my-prop: translate(-10px, -20px) |
"<custom-ident>" |
Any valid custom ident value | `–my-prop: |
"<transform-list>" |
A list of valid |
--my-prop: translate(-10px, -20px) scale(2) rotate(45deg) |