Search code examples
csssasssass-variables

Sass compiling and adding spaces between variables

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?

Solution

  • 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};