Sass负变量值？

小宇宙Near2020-03-18

我有几个scss选择器，在其中我使用相同数量的正负值，如下所示：

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

我希望对所有15px的值都使用一个变量，但这不起作用：

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

保证金金额转换为正数。我想念什么吗？

蛋蛋飞云2020/03/18 15:35:39

根据sass准则，更合理的解决方案是对interpolate变量进行修改，例如以下示例：

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

ProJinJinSam2020/03/18 15:35:39

在考虑之前的两个答案后，我添加了两分钱，但是请阅读以下内容（强调我的意思）：

您应该特别避免使用像这样的插值法#{$number}px。这实际上并不会创建数字！它创建一个看起来像数字的无引号的字符串，但不适用于任何数字操作或函数。尝试使数学单位整洁，以便$number已经具有该单位px，或者编写$number * 1px。

资源

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

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

凯梅小胖2020/03/18 15:35:39

像这样尝试

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

Newest Answer