SCSS: инвертирование / отрицание переменной на основе calc ()

Question

Я использую SCSS и хотел указать верхнюю переменную, основанную на сумме пикселей и значения rem.

Я понимаю, что невозможно объединить типы единиц в переменные SCSS,поэтому вместо этого я использую calc():

$navbar-top: calc(40px + 1 rem);

Далее в таблице стилей я хотел включить отрицательную версию $navbar-top.

Я попробовал оба варианта, но безуспешно:

(-$navbar-top)
-#{$navbar-top}

Любая идея, как я могу отменить переменную SCSS, без необходимости объявления новой переменной или повторного написания calc во всем CSS.

Спасибо.

---

РЕДАКТИРОВАТЬ

• Как отмечено в комментариях ниже, это не дубликат Sass отрицательное значение переменной?
• ЭтоВопрос в том, чтобы отменить набор переменных с помощью метода calc (), который не имеет отношения к описанному выше сообщению SO.Я отметил оба решения, представленные в этом вопросе, выше.Ни один из них не работает в этом конкретном случае.

---

РЕДАКТИРОВАТЬ 2: РЕШЕНИЕ SCSS НА ОСНОВЕ ОТВЕТА TEMANI НИЖЕ

Объявите необходимые переменные сверху,включая «отрицатель» (-1):

$navbar-top: calc(40px + 1rem);
$neg: -1;

Затем переменная может использоваться повсюду (отрицается или нет), например:

/* Non-negated */
margin: $navbar-top 0 0;

/* Negated */
margin: calc(#{$neg} * #{$navbar-top}) 0 0;

Приведенная выше отрицательная версия будетскомпилировать следующий CSS:

margin: calc(-1 * calc(40px + 1rem)) 0 0;

Answer 1

Вы можете использовать @function вместо переменной

DEMO

// The argument is defaulted to true,
// so you only need to pass an argument if you want a negative number
@function navbar-top($isPositive: true) {
    @if $isPositive { @return calc(40px + 1rem); }
    @else {@return calc((40px + 1rem) * -1); }
}

// Calling the function with the default value
.normal { margin-top: navbar-top(); }

// Calling the function with negative value
.negative { margin-top: navbar-top(false); }

Answer 2

Поскольку calc не является обычным значением, вы не можете просто добавить к нему знак - для получения отрицательного значения.

Идея состоит в том, чтобы рассмотреть другой параметр для управления знаком.Вот идея использования чистого CSS и CSS-переменной без необходимости другого calc()

.box {
  margin-top: calc( var(--s,1)*(40px + 1rem));
  height:100px;
  background:rgba(255,0,0,0.5);
}

<div class="box"></div>
<div class="box" style="--s:-1"></div>

Вы можете определить отрицательное значение, используя класс

.box {
  margin-top: calc( var(--s,1)*(40px + 1rem));
  height:100px;
  background:rgba(255,0,0,0.5);
}
.neg {
  --s:-1;
}

<div class="box"></div>
<div class="box neg"></div>

ОБНОВЛЕНИЕ

Вы также можете рассмотреть выражение с использованием переменных:

:root {
  --exp:(40px + 1rem);
}

.box {
  margin-top: calc( var(--s,1)*var(--exp));
  height:100px;
  background:rgba(255,0,0,0.5);
}

<div class="box"></div>
<div class="box" style="--s:-1"></div>