Sass负变量值？

Question

我有几个scss选择器，我使用相同数量的正面和负面，如：

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

我更喜欢为所有15px金额使用变量，但这不起作用：

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

保证金金额转换为正数。我错过了什么吗？

Answer 1

尝试这样

margin: 0 (-$pad) 20px (-$pad);

Answer 2

根据sass指南，更合理的解决方案是interpolate变量，如下例所示：

margin: 0 -#{$pad} 20px -#{$pad};

示例：https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

Answer 3

在考虑了之前的两个答案后，我将添加两分钱，但是请阅读以下内容（强调我的意思）：

您应该尤其避免使用像#{$number}px 这样的插值。 这实际上并没有创建数字！它创建一个未加引号的字符串 看起来像数字，但不适用于任何数字运算或 职能。尝试使数学保持整洁，以便$number已经 具有单位px，或输入 $number * 1px 。

Source

因此，我相信正确的方法如下，它保留了SASS / SCSS的数学能力：

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

Answer 4

创建函数

@function neg($val) {
  @return $val * -1
};

那我就这样用

$gutter: 30px;

.header {
  margin: $gutter neg($gutter);
}