如何在 calc() 表达式中获取 CSS 变量的负值？

Posted 2023-02-23

【中文标题】如何在 calc() 表达式中获取 CSS 变量的负值？

【英文标题】：How can I get a negative value of a CSS variables in a calc() expression?

【发布时间】：2018-07-16 07:56:46

【问题描述】：

首先让我向您展示我将如何在 SCSS 中执行此操作：

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#$submenu-padding-left + .5em));

将编译为：

transform: translateX(calc(-1.5em - .5em))

基本上，SCSS 允许我将减号 - 与变量连接起来，以便将其转换为负值。

是否可以使用 CSS 变量来实现这一点？

【问题讨论】：

"如何在 calc() 中将减号与 CSS 变量连接起来" 如您所见，这不是解决问题的正确方法。您永远不会在 calc() 表达式中连接任何内容。但是，您几乎可以在其他任何地方连接 var() 表达式。

@TemaniAfif 这是一个公平的观点，两个答案基本相同 - 因为你先回答了我已经将你的答案标记为已接受。

【参考方案1】：

是的，你可以做到。只需乘以-1：

:root 
  --margin: 50px;


body 
  margin: 0 100px;
  border:1px solid;


.box-1 
  background: red;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * var(--margin));


.box-2 
  background: green;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */

<div class="box-1">
</div>
<div class="box-2">
</div>

【讨论】：

哇，超级hacky - 奇怪的是这应该是必需的。

【参考方案2】：

如果你需要多次负值，那么你可以定义一个新变量：

:root 
  --margin: 50px;
  --margin--: calc(var(--margin) * -1));
 /* 
 while you may simply write like below
 but I love to use as above 
 coz, we'll only need to change value 
 in one place if needed
 */
 /* --margin--: -50px; */


.positive-margin 
  margin: var(--margin);

.negative-margin 
  margin-left: var(--margin--);

您可以使用--margin- 或--negative-margin 代替--margin--。但由于可读性，我更喜欢这个。