How to use scss function on either side of minus sign

Question

I have the following function in scss:

@function remCalc($size, $font-size : $font-size) {
    $remSize: $size / $font-size;
    @return #{$remSize}rem;
}

But when I want to use it like:

.example {
   margin: remCalc(8px) - remCalc(16px);
}

I get

.example { 
   margin: ...rem-....rem; 
}

What I would like to get is:

.example {
   margin: ...rem -..rem; // Note the space between "rem -"
}

So my question is how can I do this. I have tried to wrap both function calls inside () but that didn't work either.

I hope someone could help me with this. Thanks in advance

score 0 · Accepted Answer · answered Jan 30 '16 at 12:30

I just noticed that I had to include the minus sign within the () So

.example {
  margin: remCalc(8px) (- remCalc(16px));
}

Works

And also the following: (but only needed if the first call also requires minus sign)

.example {
  margin: (remCalc(8px)) (- remCalc(16px));
}

1 Answers1