SCSS: Calculating with a value with unit from function - sass

Question

I am defining values for a theme via a map, like this:
$sizes: (
small: 768,
medium: 1024,
large: 1200,
xlarge: 1600,
gutter: 48
);
and afterwards give them a unit with the following function:
#function sz($size) {
#return map-get($sizes, $size) + px;
}
How can I define a variable by calculating with one of the values out of the function, e.g.
$gutterhalf: (sz(gutter) / 2);
So the variable would return 48px / 2 = 24px? I know I could just go with the unitless value and add the unit afterwards, like so:
$gutterhalf: (map-get($sizes, gutter) / 2) + px;
Would there be a way to handle it differently with the value from the function?

Answer 1

Normally I would use sassmeister to do live sass demos but I can't seem to share my sass demo without it automatically switching to dart-sass. Very weird.
But I've made a fiddle outputting results to a before pseudo content style on divs by id.
See experimental ideas in fiddle... https://jsfiddle.net/joshmoto/0mbsc2g3/
And here is scss code below...
// array with no pixel unit, just integers
$sizes_0: (
sm: 768,
md: 1024,
lg: 1200,
xl: 1600,
gutter: 48
);
// both functions below use array above
// this function allows you pass diving data through
#function sz_0($size, $divide: 1) {
#return map-get($sizes_0, $size) / $divide + px;
}
// this outputs 24px
$gutterhalf_0: sz_0(gutter, 2);
// this function simply returns the array value
#function sz_2($size) {
#return map-get($sizes_0, $size);
}
// this outputs 24px
$gutterhalf_2: ( sz_2(gutter) / 2 ) + px;
// array with pixel unit
$sizes_1: (
sm: 768px,
md: 1024px,
lg: 1200px,
xl: 1600px,
gutter: 48px
);
// this function simply returns the array value with unit
#function sz_1($size) {
#return map-get($sizes_1, $size);
}
// this outputs 24px
$gutterhalf_1: sz_1(gutter) / 2;
// sass results in content
#sz_0::before {
content: '#{$gutterhalf_0}';
}
#sz_1::before {
content: '#{$gutterhalf_1}';
}
#sz_2::before {
content: '#{$gutterhalf_2}';
}