Make negaitve variable value

Question

I am trying to figure out a way to make a variable negative. I tried to execute the right: calc(0-var(--skyve-bredde)); bit right: calc(0-var(--skyve-bredde)); it did not work. This is the variable:

 #drawer, #burger{ --skyve-lengde:50%; } 

The value will be used in the right and width attributes. Any help is appreciated, thanks.

Answer 1

The reason this code does not work: (all emphasis in the quoted text is mine)

 right: calc(0-var(--skyve-bredde)); 

The above will not work for two reasons, and they are as follows:

• According to CSS syntax calc() , there must be a space before and after the + or operator.

  In addition, a space is required on both sides of the + and - operators . (* And / operators can be used without white space around them.)

• According to Type Checking for CSS calc , 0 is <number> , while the other is <percentage> . For properties such as width , left , right , etc., <percentage> takes the type <length> , and therefore the check below will fail (because the values ​​are not of the same type), and therefore the expression will be considered invalid.

  At the + or - point, check that both sides are of the same type, or that one side is the number <number> and the other is & lt; integer> . If both sides are the same type, decide this type. If one side is the number <number> and the other is the <integer>, solve <number>.

  If the operator does not perform the above checks, the expression is invalid .

---

Solutions:

• As mentioned in the answer and comment above, calc(var(--skyve-bredde) * -1) will work and output the expected result.
• Or alternately , using the same type on both sides, for example calc(0% - var(--skyve-bredde)) .

 :root { --skyve-bredde: 50%; } div { position: absolute; right: calc(0% - var(--skyve-bredde)); background: red; } 

 <div>Some text</div> 

---

Adding a negation character before a variable:

This one will not work if my understanding of the specification is correct. See the second block of code in example 11 and an explanation. Accordingly, -var(--skyve-bredde) will only become - 50% , which is not a valid value and therefore will result in an invalid property value .

 :root { --skyve-bredde: 50%; } div { position: absolute; right: -var(--skyve-bredde); background: red; } 

 <div>Some text</div> 

Answer 2

I never used CSS variables like this, but logically just changed the value:

 right: calc(var(--skyve-bredde) * -1);