Fallbacks

var() accepts an optional second argument that acts as a fallback value; in the case where the referenced custom property isn’t declared anywhere is invalid.

.btn {
  font-size: var(--btn-font-size, 0.85em);
  color: var(--btn-color, #fff);
  background-color: var(--btn-bg, #60a4b3);
}

Building Length Values

You can’t use the var function to create a length value!
This is an invalid value:

.box {
  margin: var(--gutter)em;
}

Use calc to build your length values using var.

.box {
  margin: calc(var(--gutter) * 1em);
}

  You can do simple calculations using CSS variables and calc().

:root {
  /* ... */
  --spacing: 2;
}
.main-nav li {
  margin: 0 calc(var(--spacing) * 10px); /* 20px */
}

How NOT to Use CSS Variables

var is invalid as a selector

var(--button-info) {
  ...
}

var is invalid as a property name

.card {
  var(--color-primary): #278da4;
}

var is invalid in a media query expression

@media ( min-width: var(--breakpoint-md) ){
  ...
}