多个地图，一个循环 Sass

Question

我的 _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”并在我的 scss:

中调用它

.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

Answer 1

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

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

并使用键

调用 mixin font-size

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

多个地图，一个循环 Sass

Multiple maps, one loop Sass

css

each

maps

merge

sass