Is there any way to apply the same css var in a consecutive way? Or to get the current css property value and then appending a new one? I need this to apply multiple transforms on some nested elements.

Working example needs 2 separate var for parent and child

<style>
  p {
    transform: scale(var(--scale, 1)) scale(var(--parentScale, 1)) ;
  }
</style>
<div style="--parentScale: 0.8">
   <p style="--scale: -1;">Hello</p>
 </div>

But I would like to write it like this (not working unfortunately inner --scale gets replaced by the parent --scale leaving the 'Hello' unsized)

<style>
  p {
    transform: scale(var(--scale, 1));
  }
</style>
<div style="--scale: 0.8">
  <p style="--scale: -1;">Hello</p>
</div>

Is there any workaround for this? If possibile without js

CodePudding user response：

A --scale variable is defined in the div but it's never used on the div.

This snippet sets both div and p to have a transform each with its relevant --scale

div,
p {
  transform: scale(var(--scale, 1));
}

<div style="--scale: 0.8">
  <p style="--scale: -1;">Hello</p>
</div>

UPDATE: there is a clarification from the comments that it's each individual child, not the parent div, that needs to have that 0.8 scaling.

This snippet therefore introduces a second variable, --childscale, which is initially set to 1 and is combined with the --scale. Any div that does not set it is unaffected. For the div where you are looking for the flipping over -childscale is set to -1.

p {
  transform: scale(calc(var(--scale) * var(--childscale)), 1);
}

<div style="--scale: 0.8; --childscale: 1;">
  <p style="--childscale: -1;">Hello</p>
  <p>Hello</p>
</div>