SCSS behavior with negative margin [duplicate]

Question

Let's take this SCSS code :

$margin: 10px;
.use_value {
  margin: 10px 0 0 10px;
}
.use_var {
  margin: $margin 0 0 $margin;
}
.use_negative_var {
  margin: -$margin 0 0 -$margin;
}

I expected .use_value, .use_var and .use_negative_var to be identic, but here's the result :

.use_value {
  margin: 10px 0 0 10px;
}
.use_var {
  margin: 10px 0 0 10px;
}
.use_negative_var {
  margin: 10px 0 -10px; 
}

Why is there a missing 0 in .use_negative_var ?

Answer 1

You have to interpolate the variable:

$margin: 10px;

.use_value {
  margin: 10px 0 0 10px;
}

.use_var {
  margin: $margin 0 0 $margin;
}

.use_negative_var {
  margin: -#{$margin} 0 0 -#{$margin};
}