Negative rems (CSS) being compiled as positive

Question

I have this sample block of code:

#button a:hover{
        outline: 0.0625em solid #fff;
        outline-offset: -0.0625rem;
}

But in real life it gets compiled to:

#button a:hover{
    outline: 0.0625em solid #fff;
    outline-offset: 0.0625rem;
}

No matter what the value is (i.e. -1rem, -2rem) the negative rem value will always come out positive in real life so it's not a rounding issue. I found someone with the same issue (see link below) on GitHub but they have not posted their resolution.

https://github.com/vaadin/sass-compiler/issues/100

I'm using maven to compile and GWT framework. I looked up the documentation for both among a crap ton of other documentations on rems and haven't found anything. There's not any coded specification in my system that instructs the behavior of rem so it's not a developer error.

This is only happening in rem's. Em's, px's, etc. all work just fine.

Any thoughts would be helpful thanks.

plain css works, try insert the value via calc( value * -1) or the same way you would insert a calc() rule. it shouldpreserve the negative signs . `#{}` — G-Cyrillus, Nov 04 '20 at 18:20
Yep, that makes sense but it doesn't work for some reason. :( forgot to mention I tried this earlier — Colleen, Nov 04 '20 at 18:45
okay, you should add your fails to your question, it might ring a bell to someone else ;) — G-Cyrillus, Nov 04 '20 at 18:46
did you see that question BTW : https://stackoverflow.com/questions/13296419/sass-negative-variable-value — G-Cyrillus, Nov 04 '20 at 18:51
I have, I applied the same principles in CSS and still nothing — Colleen, Nov 04 '20 at 19:49
looks like working to me : https://codepen.io/gc-nomade/pen/JjKBXjZ (view compiled css) — G-Cyrillus, Nov 04 '20 at 20:20
Has to be something with my compiler or framework then, thank you! — Colleen, Nov 05 '20 at 14:46

Negative rems (CSS) being compiled as positive

0 Answers0