Sass负变量值？

Posted 2023-03-06

【中文标题】Sass负变量值？

【英文标题】：Sass negative variable value?

【发布时间】：2012-10-29 02:02:25

【问题描述】：

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

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

我更愿意为所有 15px 的数量使用一个变量，但这不起作用：

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

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

【参考方案1】：

这样试试

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

【讨论】：

自动尝试了这种方法 - 在 calc 函数中使用时似乎不起作用。编辑：似乎你在使用 calc 时不需要使用括号，但你确实需要插入 ***.com/questions/17982111/…

【参考方案2】：

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

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

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

【讨论】：

@Green 你可以随时查看示例链接：sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

这比公认的答案更好，因为它在其中使用 mixin 时也可以工作:)

【参考方案3】：

在考虑了前两个答案后，我添加了我的二分之一，但随后阅读了这个（强调我的）：

你应该特别避免使用像#$numberpx这样的插值。 这实际上并没有创建一个数字！它创建一个不带引号的字符串 看起来像一个数字，但不适用于任何数字运算或 职能。尝试使您的数学单元干净，以便 $number 已经 有单位px，或者写成$number * 1px。

Source

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

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

【讨论】：

乍一看，这似乎是挑剔（你的答案），但第二眼看它确实是更好的答案。毕竟，如果变量确实变成了负变量，那么答案就变成了正数！ $垫：-2rem； ...边距：0 -#$pad; // 变为边距：0 --2rem;边距：0 $pad*-1； // 变为边距：0 2rem;

【参考方案4】：

创建一个函数

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

那我就这样用

$gutter: 30px;

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