0

I have some Sass code: margin-top: -($height+40)#{$unit};

that compiles and outputs "-140 vh" and not "-140vh". It's basically adding a space. I think I am using some old code. What should I do instead?

kurrle
  • 59
  • 1
  • 8

1 Answers1

1

It's better to use numbers with their units, like the following code. More information: https://sass-lang.com/documentation/operators/numeric

$height: 100vh;
margin-top: -($height+40);

But if there's a reason to use unit in the separate variable, the following code could be useful:

$height: 100;
$unit:vh;
margin-top: #{-($height+40)}#{$unit};
Amirreza Noori
  • 1,456
  • 1
  • 6
  • 20
  • 2
    Thanks @amirreza! That worked. I also found that -($height+40)+$unit; worked as well. Not sure which one is a better practice. Thanks again for your quick response and your help! – kurrle Jan 20 '22 at 22:44