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

  <button class="button">ボタン</button>
</div>
@property --primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #7bd389;
}

@property --secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #607466;
}

.card {
  /** この値は `<color>` というデータ型に一致しないため */
  --primary: 100px;
  /** 初期値にフォールバックされるため、`var(--primary)` は `#7bd389` になる */
  width: var(--primary);
}

.button {
  background-color: var(--primary);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.