Is possible to process a CSS variable?-CodePudding

I have my code with a CSS variable, let's call it --element-padding, which allows multiple values like 8px 0 12px 79px, this variable is in a webcomponent that I own, and it's being used by third parties.

And I use it in my webcomponent CSS

padding: var(--element-padding, '0');

This variable allows my users to override the padding declaring it when styling my component

.awesome-component {
   --element-padding: 8px 0 12px 79px;
}

Now I have found that I would need to process it, because I just need the padding-top for another style.

One option would be to change --element-padding to 4 different variables

--element-padding-top
--element-padding-right
--element-padding-bottom
--element-padding-left

But then, the users will have to change their code to adapt to the new variables, causing a lot of trouble.

Is there any way to get this variable and make some kind of splitting-calculations before using it in the var() CSS function? that way I can get the 1st position of the variable, without the need to tell the users to change their implementation.

(The code and explanation is a simplified one which doesn't adjust to the real case, but the point is about splitting a variable containing 4 measures into 4 different variables, without the need to add/modify variables in the user side / root)

CodePudding user response：

Original answer at the bottom