Why Are My Scoped CSS Custom Properties Ignored When Used in Outer Scope Calculations?

CSS Scoped Custom Property Ignored When Used to Calculate Variable in Outer Scope

When attempting to create composable, loosely coupled CSS, it's important to understand the scoping of custom properties. In certain scenarios, changes made to a scoped custom property in a child element may not affect the parent element as expected.

One such scenario occurs when a custom property is used to calculate a variable in an outer scope. The issue arises when the custom property is defined again in the child element, causing the initial evaluation from the parent element to be ignored.

To illustrate this, consider the following example:

: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);
}

In this example, the --size-* properties are calculated at the root level using the --scale custom property. However, within the .scale-* classes, the --scale property is defined again. This causes the inherited value of --scale from the root element to be ignored, resulting in the --size-* properties being calculated using the default value of --scale: 1.

To avoid this issue, it's essential to define custom properties at the appropriate level and avoid redefining them in child elements. This ensures that scoped custom properties can be used effectively to calculate variables in outer scopes and achieve composable, loosely coupled CSS.

The above is the detailed content of Why Are My Scoped CSS Custom Properties Ignored When Used in Outer Scope Calculations?. For more information, please follow other related articles on the PHP Chinese website!