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 。

来源

因此，我相信正确的方法将如下所示，它保留了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);
}

Answer 5

官方SASS指南为（当前）最高投票的答案提出了类似的解决方案 - 而不是包裹帕伦斯（Parens）内的负符号，而是将其放在外面，例如。

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

来源：https：//sass-lang.com/documentation/operators/numeric#unary-operators

和per＃comment-72915126当它出现在CSS calc函数中时，您需要插入SASS值：

margin: calc(#{-$pad} - 10px);

奇怪的是，不再需要帕伦斯 - 也许字符串插值以类似的方式包裹在Parens中？

（我使用prettier@2.3和dart-sass@1.49）

Answer 6

@bouh的答案对我有用，但是我必须插入变量以处理其他变量，这些变量

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

例如：

$gutter: 30px;
$gutter-half: calc(#{$gutter} / 2);
.header {
  margin: $gutter neg($gutter-half);
}