Example for :doodle doesn't work

[zemian]

Hi, The first example for :doodle didn't work for me https://css-doodle.com/#selector-:doodle

https://codepen.io/zemian/pen/wvdjrMM

:doodle { --s: 0 }
:doodle(:hover) { --s: 1 }

transition: .5s cubic-bezier(.175, .885, .32, 1.275);
transition-delay: @rand(500ms);
transform: translateY(calc(var(--s) * 100%));

But if I add some setup like this, it worked:

  :doodle { @grid: 5 / 8em; grid-gap: 1px; }
  background: #60569e;
  
  :doodle { --s: 0 }
  :doodle(:hover) { --s: 1 }

  transition: .5s cubic-bezier(.175, .885, .32, 1.275);
  transition-delay: @rand(500ms);
  transform: translateY(calc(var(--s) * 100%));

[yuanchuan]

Yes I only put the main part of the example code and it's not complete.

It'd be better to attach a demo link in the docs.