What is the correct "null" value for a CSS string variable?

December 2, 2022

Using CSS variables, I know you can set them:

--transform: translateX(30px);
transform: var(--transform, translateY(100%));
//         ^ usage          ^ fallback value if none specified

With transforms, it is possible to chain methods – as well as use complex variables:

--transform: translateX(30px) rotate(-12deg);
transform: var(--transform) translateX(10px) rotate(15deg) scale(1.5);

Is there a way of ignoring the --transform (but still follow all of the other instructions before and after it)? I’ve tried:

--transform: none
--transform: ""

But obviously they invalidate the declaration.

body{
  display: flex;
  gap: 100px;
}

.block{
  --turn-amount: rotate(45deg) rotate(13deg);
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount) scale(var(--scale-amount));
}
.block-1{
  --turn-amount: 0
}

<div class="block block-1">Grow and turn</div>
<div class="block block-2">Just grow</div>

I would like to write something like:

.block-1{
  --turn-amount: null;
}

But at the moment the best I’ve come up with is just to declare a "nothingy" transform, i.e.

.block-1{
  --turn-amount: scale(1);
}

>Solution :

A simple space is enough:

body{
  display: flex;
  gap: 100px;
}

.block{
  --turn-amount: rotate(45deg) rotate(13deg);
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount) scale(var(--scale-amount));
}
.block-1{
  --turn-amount: ;
}

<div class="block block-1">Grow and turn</div>
<div class="block block-2">Just grow</div>

Or like below. Note the usage of comma with nothing after it:

body{
  display: flex;
  gap: 100px;
}

.block{
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount,) scale(var(--scale-amount));
}
.block-2{
  --turn-amount: rotate(45deg) rotate(13deg);
}

<div class="block block-1">Grow and turn</div>
<div class="block block-2">Just grow</div>

Note: That is, var(–a,) is a valid function, specifying that if the –a custom property is invalid or missing, the var() should be replaced with nothing.^ref