1

Here's a simple attempt, where the blue border should be 7px instead of 3px. Why doesn't it work?

:root {
    --sum-a: 1px;
    --sum-b: 2px;
    --sum: (var(--sum-a) + var(--sum-b))
}

div {
    width: 100px;
    height: 100px;
}

.one {
    border: calc(var(--sum)) solid pink;
}

.two {
    --sum-a: 4px;
    --sum-b: 3px;
    border: calc(var(--sum)) solid cornflowerblue;
}
<div class="one"></div>
<div class="two"></div>

I was hoping the --sum-a and --sum-b "args" could be passed into the --sum "function".

trusktr
  • 44,284
  • 53
  • 191
  • 263
  • The "duplicate" answer is confusing, to say the least. Why were CSS variables defined to work this way? – trusktr Aug 17 '20 at 23:22
  • This pen shows how to do it, but it couples the re-usability of the CSS "function" to the HTML markup: https://codepen.io/trusktr/pen/c3f10cf692bb40de403f6374cd9c54f1 – trusktr Aug 17 '20 at 23:39
  • *but it couples the re-usability of the CSS "function" to the HTML markup* --> you are then using the wrong tool and you need to re-think your logic. What you want to achieve cannot be done with CSS variables and a function defined in root level. – Temani Afif Aug 17 '20 at 23:43
  • if you change `:root` with `*` you will get the result you want but you should pay attention to some unwanted result since you are defining the function on each element – Temani Afif Aug 17 '20 at 23:49
  • @TemaniAfif Ah yep, that indeed works more like what I wanted: https://codepen.io/trusktr/pen/316b93f2c49b28af40bd43c3e3cd4892. But what is the performance cost? Seems like it is expensive for what otherwise could cost nothing if there was an official solution. I opened the idea for "CSS Custom Functions" here: https://github.com/w3c/csswg-drafts/issues/5440. It wouldn't seem ideal, for example, to create a "functions.css" file full of `*{}` "functions". – trusktr Aug 18 '20 at 00:33

0 Answers0