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

Question

首先让我向您展示我将如何在 SCSS:

中执行此操作

$submenu-padding-left: 1.5em;

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

这将编译为：

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

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

是否可以使用 CSS 个变量来实现？

Answer 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>

Answer 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--。但我更喜欢这个，因为可读性。

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

How can I get a negative value of a CSS variables in a calc() expression?

css

css-variables

css-calc