具有负边距的 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; 
}

为什么.use_negative_var 中缺少0？

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