Skip to content

padding-left not applied when using CSS clamp() with custom properties in utility class #18457

Answered by wongjn
mustafa-soylemez asked this question in Help
Discussion options

You must be logged in to vote

The problem is the calc() expression inside round(). Breaking it down by types:

 var(--pl-from) + (var(--pl-to) - var(--pl-from))  * ( (100vw - var(--pl-min-vw, var(--viewport-min)))  /  (var(--pl-max-vw, var(--viewport-max)) - var(--pl-min-vw, var(--viewport-min))) )
┗━━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━┛ * (┗━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━┛ / ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛)

So the types become:

calc( <length> * ( <length> / <length> ) )

This is invalid since you cannot multiply or divide <length> types together. Only one of these type signatures would work:

calc( <length> * ( <number> / <number> ) )
calc( <…

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@mustafa-soylemez
Comment options

Answer selected by mustafa-soylemez
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
2 participants