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

创建一个函数

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

然后我像这样使用它

$gutter: 30px;

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

Answer 4

在考虑了之前的两个答案后，我添加了我的二分之一，但随后阅读了这篇文章（重点是我的）：

你应该特别避免使用像#{$number}px. 这实际上并没有创建一个数字！它创建一个看起来像数字的不带引号的字符串，但不适用于任何数字操作或函数。尝试使您的数学单元干净，以便$number已经有 unit px，或者写$number * 1px.

来源

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

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