css - 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已经拥有 unit px，或编写$number * 1px.

资源

因此，我认为正确的方法如下，它保留了 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);
}