具有负边际的SCSS行为

Question

我们来看看这个SCSS代码：

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

我希望.use_value，.use_var和.use_negative_var是正确的，但这是结果：

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

为什么0中缺少.use_negative_var？

Answer 1

您必须插入变量：

$margin: 10px;

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

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

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