スコープ指定された CSS カスタム プロパティがアウター スコープの計算で使用されるときに無視されるのはなぜですか?

外部スコープの変数の計算に使用される場合、CSS スコープのカスタム プロパティが無視される

コンポーザブルな疎結合 CSS を作成しようとする場合、次のことが重要です。カスタム プロパティのスコープを理解します。特定のシナリオでは、子要素内のスコープ付きカスタム プロパティに加えられた変更が、親要素に期待どおりに影響しない場合があります。

そのようなシナリオの 1 つは、カスタム プロパティを使用して外部スコープ内の変数を計算するときに発生します。この問題は、カスタム プロパティが子要素で再度定義されると発生し、親要素からの最初の評価が無視されます。

これを説明するために、次の例を考えてみましょう:

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

ol {
  font: 1em sans-serif;
}

.size-1 {
  font-size: var(--size-1);
}

.size-2 {
  font-size: var(--size-2);
}

.size-3 {
  font-size: var(--size-3);
}

この例では、--size-* プロパティは、--scale カスタム プロパティを使用してルート レベルで計算されます。ただし、.scale-* クラス内では、--scale プロパティが再度定義されます。これにより、ルート要素から --scale の継承値が無視され、 --size-* プロパティが --scale のデフォルト値 1 を使用して計算されます。

この問題を回避するには、カスタム プロパティを適切なレベルで定義し、子要素で再定義しないようにすることが重要です。これにより、スコープ付きカスタム プロパティを効果的に使用して、外側のスコープ内の変数を計算し、構成可能な疎結合 CSS を実現できるようになります。

以上がスコープ指定された CSS カスタム プロパティがアウター スコープの計算で使用されるときに無視されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。