Sass负变量值?


107

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

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

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

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

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

Answers:




2

在考虑之前的两个答案后,我添加了两分钱,但是请阅读以下内容(强调我的意思):

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

资源

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

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

乍一看,这似乎是挑剔的(您的答案),但乍一看,它确实是更好的答案。毕竟,如果变量确实变为负变量,则答案变为肯定!$ pad:-2rem; ...保证金:0-#{$ pad}; //变为保证金:0 --2rem; 保证金:0 $ pad * -1; //变为保证金:0 2rem;
Fnordius
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.