Sass negative variable value?

CssSassCompass Sass

Css Problem Overview


I have a couple of scss selectors where I use the same amount positive and negative, as in:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

I'd prefer to use a variable for all the 15px amounts, but this does not work:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

The margin amounts convert to positive numbers. Am I missing something?

Css Solutions


Solution 1 - Css

Try it like this

margin: 0 (-$pad) 20px (-$pad);

Solution 2 - Css

A more sane solution according to sass guidelines would be to interpolate variables like the following example:

margin: 0 -#{$pad} 20px -#{$pad};

An example: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

Solution 3 - Css

I'm adding my two-penneth after considering the two previous answers, but then reading this (emphasis mine):

> You should especially avoid using interpolation like #{$number}px. > This doesn’t actually create a number! It creates an unquoted string > that looks like a number, but won’t work with any number operations or > functions. Try to make your math unit-clean so that $number already > has the unit px, or write $number * 1px. > > Source

Therefore I believe the correct way would be as follows, which preserves the mathematical abilities of SASS/SCSS:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

Solution 4 - Css

create a function

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

then I use it like this

$gutter: 30px;

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

Solution 5 - Css

The official sass guides suggest a similar solution to the (currently) highest voted answer - instead of wrapping the minus-sign inside the parens, put it outside, e.g.

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -($pad) 20px -($pad);

source: https://sass-lang.com/documentation/operators/numeric#unary-operators

and per #comment-72915126 you would want to interpolate the sass value when it appears inside a css calc function:

margin: calc(#{-$pad} - 10px);

strangely, the parens are no longer required - perhaps the string interpolation acts in a similar way to wrapping it in parens?

(I'm using [email protected] and [email protected])

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSteveView Question on Stackoverflow
Solution 1 - CssZoltan TothView Answer on Stackoverflow
Solution 2 - CssVangel TzoView Answer on Stackoverflow
Solution 3 - CssEvilDrView Answer on Stackoverflow
Solution 4 - CssBouhView Answer on Stackoverflow
Solution 5 - CssJon zView Answer on Stackoverflow