CSSカスタムプロパティを使用したスコープのパワー（および楽しい）

CSSカスタムプロパティ（変数）は、しばしば見落とされがちな強力なスコーピング機能を提供します。この記事では、効率的で動的なスタイリングのためにこのパワーを活用する方法について説明します。

基本的なCSS変数の使用法（例： --size: 1em; font-size: var(--size); ）に精通しているかもしれませんが、それらの潜在能力はスコーピング能力にあります。これにより、大幅なコード削減とメンテナンスが容易になります。

実用的なアプリケーションを調べてみましょう。

スコープスタイル：ボタンの例

プライマリボタンとセカンダリボタンのスタイリングを検討してください。従来のアプローチには、各ボタンタイプとそのさまざまな状態（ホバー、アクティブ）の個別のスタイルが含まれる場合があります。これにより、繰り返しコードが発生します。

スコープ変数を使用して、ベースボタンスタイルを定義し、異なるボタンタイプの色相のみを変更できます。

 。ボタン {
  パディング：1REM 1.25REM;
  色：#fff;
  font-weight：bold;
  フォントサイズ：1.25rem;
  マージン：1rem;
  遷移：バックグラウンド0.1秒の容易さ。
  背景：HSL（var（ -  hue）、100％、50％）;
  アウトラインカラー：HSL（var（ -  hue）、100％、80％）;
}
.button：hover {background：hsl（var（ -  hue）、100％、40％）; }
.button：Active {background：hsl（var（ -  hue）、100％、30％）; }

.button  -  primary { -  hue：233; }
.button  -  secondary { -  hue：200; }

これにより、コードが大幅に削減され、メンテナンスが簡素化されます。ベースの変更.buttonスタイルすべてのバリアントを自動的に更新します。さらに、HTMLに変数を直接インラインにして、さらに柔軟性を高めることができます。

<button class="button" style="--hue: 20;">オーバーライド</button>

インライン変数を備えた動的アニメーション

たとえば、パグやJavaScriptなどのテンプレートエンジンを使用して、カスタムプロパティを動的生成と組み合わせると、実際のパワーが輝いています。これにより、ランダムなインライン変数割り当てが可能になり、各要素に一意のアニメーションが作成されます。

例：「興奮」ボタン

微妙に浮かんでから、ホバーで「シェイク」するボタンを作成しましょう。各アニメーションの個別のキーフレームを定義する代わりに、変数を使用して、単一のキーフレーム定義内のアニメーション動作を制御します。

 。ボタン {
  -Y：-25; -x：0; - 回転：0; - スピード：2;
  アニメーション：Flow-and-Shake Calc（var（ -  speed） * 1s）無限の容易さ。
}

.button：hover { -  speed：.1; -X：1; -Y：-1; -  rotation：-1; }

@keyframes flow-and-shake {
  0％、100％{変換：翻訳（calc（var（ -  x） * -1％）、calc（var（ -  y） * -1％））回転（calc（var（ - 回転） * -1deg））; }
  50％{変換：翻訳（calc（var（ -  x） * 1％）、calc（var（ -  y） * 1％））回転（calc（var（ - 回転） * 1deg））; }
}

このアプローチは、必要なキーフレーム定義の数を大幅に削減し、よりクリーンで保守可能なコードにつながります。

例：ランダムバブル

これに基づいて、複数のアニメーション化されたバブルを備えたシーンを作成できます。それぞれが、スコープCSS変数を通じて制御されるランダム化プロパティ（サイズ、位置、アニメーション速度など）を備えています。これにより、可変スコープと動的コンテンツ生成を組み合わせる力が示されます。

要約すると、CSSカスタムプロパティとそのスコーピング機能を効果的に利用すると、コードが大幅に少ない動的で複雑なスタイルを作成できるため、保守性と効率が向上します。提供された例は、静的要素とアニメーション化された要素の両方でこれを達成する方法を示しています。

以上がCSSカスタムプロパティを使用したスコープのパワー（および楽しい）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。