SCSS behavior with negative margin

sass

Solution

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

Problem

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` ?

Original source

Related problems