SASS: MIXIN for set heights - css

Question

First time asking here.
I'm trying to make somekind of MIXIN in order to set heights for an element.
For example < span class="space h5" >< /span > in CSS this would be:
$size: 1px;
.space {
display: block;
}
.space.x5 {
height: $size * 5;
}
So my question, is it possible to create a mixin to multiply, add up or subtract amounts with classes?
For example
< span class=" space h5 x2 add4 ">< /span > ====> height: 14px
or:
< span class=" space h5 x4 subtract2 ">< /span > ====> height: 18px
Thanks a lot!
Regards.

Answer 1

#mixin height-special($default,$multiplier: 1,$extra: 0) {
height: ($default*$multiplier+$extra) + px;
}
So, height-special(5,2,4) will return 14
you can leave out the last 2 which will return the default value.

Answer 2

It's a nice solution but I was looking for something more like a loop:
.space {
display: block;
clear: both;
}
$space-base: 5px;
/*multipliers*/
#for $space-base from 1 through 100 {
.h5x#{$space-base} {
height: $space-base * 5px;
}
}
/*add*/
.h5x2.add-1 {
height: ($space-base * 2 + 1);
}
.h5x2.add-2 {
height: ($space-base * 2 + 2);
}
.h5x2.add-3 {
height: ($space-base * 2 + 3);
}
.h5x2.add-4 {
height: ($space-base * 2 + 4);
}
.h5x2.add-5 {
height: ($space-base * 2 + 5);
}
.h5x2.add-6 {
height: ($space-base * 2 + 6);
}
.h5x2.add-7 {
height: ($space-base * 2 + 7);
}
.h5x2.add-8 {
height: ($space-base * 2 + 8);
}
.h5x2.add-9 {
height: ($space-base * 2 + 9);
}
/*subtract*/
.h5x2.sub-1 {
height: ($space-base * 2 - 1);
}
I was trying to avoid all the combination by hand and do it with SASS.