负变量值？

我有一些选择符，其中我使用了相同数量的正面和负面，如:

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

我更喜欢对所有15px 的数量使用一个变量，但这不起作用:

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

边际金额转换成正数，我是不是漏掉了什么？

47939 次浏览
小开

试试这样

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

根据 sass 的指导方针，一个更理智的解决方案是对 interpolate变量使用，比如下面的例子:

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

例如: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

小开

在考虑了前面两个答案之后，我加上了我的两个硬币，但是接下来读到这个(强调我的) :

你应该 特别是避免使用像 #{$number}px这样的插值。 这实际上并没有创建一个数字，而是创建了一个无引号的字符串 看起来像一个数字，但不能用于任何数字运算或 尽量使你的数学单元清洁，以便 $number已经 具有单元 px，或写入 $number * 1px。

来源

因此，我认为正确的做法应该是:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;
小开
最佳答案

创建一个函数

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

那我就这么用

$gutter: 30px;


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

官方的 Sass 指南提出了一个类似的解决方案(目前)投票最多的答案-而不是包装内的减号括号，把它放在外面，例如。

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

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

当 sass 值出现在 csscalc函数中时，每个 # 评论 -72915126都需要插值:

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

奇怪的是，不再需要括号了——也许字符串插值的作用类似于用括号包装它？

(我用的是“更漂亮”2.3和“达特-萨斯”1.49)

小开

@ Bouh 给出的答案对我很有用，但我必须对变量进行内插，以处理其他包含 calcs ()的变量

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

例如:

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


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

提交答案