Try it like this
margin: 0 (-$pad) 20px (-$pad);
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
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 unitpx
, 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;
create a function
@function neg($val) {
@return $val * -1
};
then I use it like this
$gutter: 30px;
.header {
margin: $gutter neg($gutter);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With