Sass Negative Variable Value

Sass negative variable value?

create a function

@function neg($val) {
  @return $val * -1
};

then I use it like this

$gutter: 30px;

.header {
  margin: $gutter neg($gutter);
}

SCSS: Inverting/Negating Variable Based on calc()

Since calc is not a usual value you cannot simply append a - sign on it to obtain the negative value.

An idea would be to consider another parameter to control the sign. Here is an idea using pure CSS and CSS variable without the need of another 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>

SCSS behavior with negative margin

You have to interpolate the variable:

$margin: 10px;

.use_value {
  margin: 10px 0 0 10px;
}

.use_var {
  margin: $margin 0 0 $margin;
}

.use_negative_var {
  margin: -#{$margin} 0 0 -#{$margin};
}

Using negative values fails the execution in SASS

Just use like below

padding: ($padding-large-horizontal - 1);

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

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>

SCSS: Inverting/Negating Variable Based on calc()

Since calc is not a usual value you cannot simply append a - sign on it to obtain the negative value.

An idea would be to consider another parameter to control the sign. Here is an idea using pure CSS and CSS variable without the need of another 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>

Using negative CSS Custom Properties

As of this posting, March 2018, the only way to use negative custom properties is by multiplying it by -1 with the calc function.

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

Switch value of a variable in SASS

You are declaring a Sass variable with a global scope, so each line is modifying the global var, like in JavaScript.
You can use @debug $currentColor; between you lines to see variable state.

You should probably use a mixin to prevent scope issue, or declare another variable with a local scope each time (try to just delete $currentColor:null;)

Sass Negative Variable Value