SCSS use parameters for box-shadow-CodePudding

I can't seem to be able to use parameters (without using collections) for box-shadows. I would like to use a single parameter (to avoid repeating the same value) to declare 3 parts of the collection.

When I try the following scss

@mixin top-shadow($size, $color) {
    box-shadow: inset 0 $size $size -$size $color;
}

@include top-shadow(1rem, red);

The resulted css looks like this

box-shadow: inset 0 1rem 0rem red;

I would expect it to look like

box-shadow: inset 0 1rem 1rem -1rem red;

CodePudding user response：

Right now your mixin is making a calculation: $size -$size. That's why it calculates as 0rem.

In your mixin, if you write #{-$size}, this will instruct the compiler to just output the variable without a calculation.