CSS変数とcalc/clamp関数

カスタムプロパティ、それがカスケードの中で実行時にどう解決されるか、そして流動的なインターフェースのためのcalc()関数とclamp()関数をマスターしましょう。

10 分 · 3 問

カスタムプロパティはプリプロセッサの変数ではありません。Sassの変数はコンパイル時に置き換えられますが、--brandプロパティは実行時に解決され、カスケードに参加し、他のプロパティと同じように継承され、メディアクエリやクラス、あるいはJavaScriptのsetProperty()によって変更できます。これこそが、動的なテーマ設定、再コンパイルなしのダークモード、そして再レンダリングなしのCSS/JS間の通信を可能にするものです。

:root {
  --brand: #6c5ce7;
  --spacing: 8px;
}

.card {
  color: var(--brand);
  padding: calc(var(--spacing) * 2);
  border-color: var(--accent, currentColor);
}

var()の第2引数はフォールバック値で、プロパティが定義されていない場合にのみ使われます。よくある落とし穴として、--accentが12pxでそれをcolorに注入した場合、フォールバックは使われません。宣言は算出値の時点で無効になります。つまりプロパティは、通常の構文エラーのように直前の宣言に戻るのではなく、継承値または初期値にフォールバックします。

@propertyルールは2つの大きな制約を解消します。変数に型（つまり検証）を与え、さらに変数をアニメーション可能にします。エンジンが変数を不透明な文字列として扱う代わりに、2つの型付きの値の間をどう補間すればよいかを理解できるようになるからです。

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.gauge {
  background: conic-gradient(
    var(--brand) var(--progress),
    #e5e7eb 0
  );
  transition: --progress 0.4s ease-out;
}

.gauge.is-full {
  --progress: 100%;
}

数学的な面では、calc()は単位を混在させることができます（calc(100% - 2rem)）。解決がレンダリングのコンテキストに依存するため、これはプリプロセッサでは不可能です。clamp(min, ideal, max)はmax(min, min(ideal, max))の糖衣構文であり、流動的なタイポグラフィにおいて大量のブレークポイントよりも優れています。理想値（多くはvwやcqiで表現される）が2つの境界の間を自由に滑らかに変化します。

:root {
  --fluid-title: clamp(
    1.5rem,
    1rem + 2.5vw,
    3rem
  );
}

h1 {
  font-size: var(--fluid-title);
  max-width: clamp(20ch, 60%, 65ch);
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. --gapが12pxのときにcolor: var(--gap)が評価されると、何が起きますか？
   • 宣言は無視され、直前のcolorルールが適用される
   • 宣言は算出値の時点で無効になり、colorはunsetとして解決される
   • ブラウザが12pxを黒に近い色に変換する
   • コンソールにエラーがスローされ、スタイルシートが拒否される
2. clamp(1rem, 2.5vw, 2rem)は厳密には何と等価ですか？
   • max(1rem, min(2.5vw, 2rem))
   • min(1rem, max(2.5vw, 2rem))
   • calc(1rem + 2.5vw + 2rem)
3. 通常のカスタムプロパティに対する@propertyの主な利点は何ですか？
   • 変数をJavaScriptからアクセス可能にする
   • 変数をcalc()の中で使えるようにする
   • 変数に型を与え、特にアニメーションで補間可能にする
   • 変数をドキュメント全体で強制的に継承させる