SCSS behavior with negative margin

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 ?

score 7 · Accepted Answer · answered Jan 29 '14 at 23:18

7

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

answered Jan 29 '14 at 23:18

Joseph Silber

214,931
59
362
292

1

Without interpolation, is it interpreted like `[-margin, 0, 0-margin]` ? – zessx Jan 29 '14 at 23:22
@zessx - why don't you check the compiled file? – Joseph Silber Jan 29 '14 at 23:22
1

Obviously, you've got the solution, I'm just thinking about the *Why*. – zessx Jan 29 '14 at 23:24
@zessx - sass doesn't support the syntax you tried, so I don't know what the actual result would be. Whenever your variables are not surrounded by whitespace, you have to interpolate them. – Joseph Silber Jan 29 '14 at 23:25
Ok, glad to learn it, thanks ! – zessx Jan 29 '14 at 23:27

SCSS behavior with negative margin

1 Answers1