Sass负变量值？

css CSS

小宇宙Near

2020-03-18

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

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

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

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

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

第2013篇《Sass负变量值？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
蛋蛋飞云 2020.03.18

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

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

范例：https：//www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

ProJinJinSam 2020.03.18

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

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

资源

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

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;
凯梅小胖 2020.03.18

像这样尝试

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android