多個地圖，一個循環薩斯

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 /功能字體大小」將它們組合起來，在我的回憶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 
     ) 
    ) 
), 

，並呼籲混入字體大小與一鍵

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