Css 多个映射，一个循环Sass

我的_variables.scss文件中有两个不同的映射：

$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
   )
);

我会将它们组合成一个“@mixin/function font size”，并在我的SCS中调用它：

.selector{
    @import font-size(small);
}

要在我的css中生成如下内容：

.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

您可以尝试使用此结构更改$fontsizes映射

   small: (
      default: 14px,
      resolutions:(
         (
           breakpoint: 'bkp-768',
           default: 13px
         ),
         (
           breakpoint: 'bkp-480',
           default: 20px
         )
     )
 ),

并使用键调用mixin字体大小

  @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);
}

---

你试过什么吗？有什么事吗？所以这不是一个代码编写服务