Sass负变量值是什么？

Question

我有几个 SCSS 选择器，在这些选择器中我使用了相同数量的正数和负数，例如：

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

我更倾向于使用一个变量来代替所有15px的数值，但是这样不起作用：

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

这些边距数值需要转换为正数。我有什么遗漏吗？

- Steve

Answer 1

试着这样做

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

- Zoltan Toth

---

自动尝试了这种方法 - 在使用 calc 函数时似乎不起作用。编辑：看起来在使用 calc 时不需要使用括号，但是需要插值 https://dev59.com/p2Ml5IYBdhLWcg3w966L - Kevin

Answer 2

根据sass指南，一种更理智的解决方案是像以下示例中一样插值变量：

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

一个例子：https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

- Vangel Tzo

---

@Green 你可以随时查看示例链接：https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293 - Vangel Tzo

这个比被接受的答案更好，因为它在使用 mixin 时也能正常工作 :) - OZZIE

Answer 3

在考虑了前两个答案并阅读了以下内容后，我想再补充一些（重点是我的）：

你尤其应该避免使用插值 比如像这样的#{$number}px。 这不会真正创建一个数字！ 它创建了一个未引用的字符串，看起来像一个数字，但无法与任何数字运算或函数一起使用。 尝试使您的计量单位干净，以便 $number 已经带有 px 单位，或编写 $number * 1px。

来源

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

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

- EvilDr

---

乍一看，这似乎是挑剔（你的答案），但仔细一看，它确实是更好的答案。毕竟，如果变量变为负数，答案就会变成正数！$pad: -2rem; ... margin: 0 -#{$pad}; // 变为 margin: 0 --2rem; margin: 0 $pad*-1; // 变为 margin: 0 2rem; - Fnordius

这是一个新颖的解决方案，但我不认为它是“正确”的方式 - 你认为它比这个类似的解决方案更好吗？ margin: 0 0 - $pad 20px 0 - $pad; - Jon z

Answer 4

创建一个函数。

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

然后我像这样使用它

$gutter: 30px;

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

- Bouh

Answer 5

官方Sass指南提供了与当前得票最高答案类似的解决方案 - 不要将减号放在括号内部，而是放在外面，例如：

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

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

而根据#comment-72915126，在出现在css的calc函数内部时，您将需要插值Sass值：

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

奇怪的是，括号不再是必需品了——也许字符串插值的方式类似于用括号包裹它的方式？

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

- Jon z

---

这取决于使用情况。如果你有 margin: 0 -($pad); 这将产生 margin: -16px;，但你可能希望它产生 margin: 0 -16px;，那么你需要有 margin: 0 (-$pad); 来实现这一点。 - toni_lehtimaki

Answer 6

@Bouh提供的答案对我有用，但我不得不插入变量来处理其他包含calcs（）的变量

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

例如：

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

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

- imagica