Multiple maps, one loop Sass - css

Question

I have two different maps in my _variables.scss file:
$breakpoints: (
bkp-320: 320px,
bkp-480: 480px,
bkp-768: 768px,
bkp-992: 992px,
bkp-1200: 1200px
);
$fontsizes: (
tiny: (
null: 12px,
bkp-768: 11px
),
small: (
null: 14px,
bkp-768: 13px
),
base: (
null: 16px,
bkp-768: 15px
),
large: (
null: 18px,
bkp-768: 17px
)
);
I would combine them in a "#mixin / function font-size" and recall it in my scss:
.selector{
#import font-size(small);
}
to produce in my css something like this:
.selector {
/* null: default value of font-size, not need mediaqueries */
font-size: 14px;
}
#media only screen and (min-width: 768px) {
.selector {
font-size: 13px;
}
}
thxxx

Answer 1

you could try to change $fontsizes map with this structure
small: (
default: 14px,
resolutions:(
(
breakpoint: 'bkp-768',
default: 13px
),
(
breakpoint: 'bkp-480',
default: 20px
)
)
),
and call mixin font-size with a key
#function getMap($map,$key) {
#if map-has-key($map, $key) {
#return map-get($map, $key);
}
#warn "Unknown `#{$key}` in $map.";
#return null;
}
// font-size
#mixin font-size($key){
$fontsize: getMap($fontsizes, $key);
$resolutions: getMap($fontsize, resolutions);
font-size: getMap($fontsize, default);
#each $resolution in $resolutions {
#media only screen and (min-width: getMap($breakpoints,getMap($resolution, breakpoint)) ) {
font-size: getMap($resolution, 'default');
}
};
}
p {
#include font-size(small);
}
h1 {
#include font-size(large);
}