多张地图，一圈Sass答案

【问题标题】：Multiple maps, one loop Sass多张地图，一圈Sass
【发布时间】：2016-04-13 03:43:10
【问题描述】：

我的 _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

【问题讨论】：

您尝试过任何方法吗？有什么吗？ SO 不是代码编写服务。

标签： css merge sass maps each

【解决方案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);
}

【讨论】：