如何在calc()表达式中获得CSS变量的负值? [英] How can I get a negative value of a CSS variables in a calc() expression?

问题描述

让我首先向您展示我将如何在SCSS中做到这一点:

Let me start by showing you how I would do this in SCSS:

$submenu-padding-left: 1.5em;

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

它将编译为:

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

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

Basically SCSS allows me to concatenate a minus symbol - with a variable in order to convert it to a negative value.

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

Is it possible to achieve this with CSS Variables?

推荐答案

是的，您可以这样做.只需乘以-1:

Yes you can do it. Simply multiply by -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>

这篇关于如何在calc()表达式中获得CSS变量的负值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！