<div class="card">
  これはカードです。

  <button class="button">ボタン</button>
</div>
:root {
  --primary: #7bd389;
  --secondary: #607466;
}

.card {
  --primary: 100px;

  width: var(--primary);
}

.button {
  /* 意図せず無効な値が代入されてしまっている */
  background-color: var(--primary);
  color: var(--secondary);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.