メディアクエリステートメントの組み合わせ

Question

私は、SASSでメディアクエリヘルパーを作成しています。 mediumブレークポイントが機能するように助けてください。

今は最大幅のみを印刷しています。なぜどんなアイデア？

$breakpoints: (
    small: (max-width: 767px), 
    medium: (min-width: 768px) and (max-width: 991px), // <-- 
    large: (min-width: 1200px) 
); 

@mixin respond-to($name) { 
    @if map-has-key($breakpoints, $name) { 
    @media #{inspect(map-get($breakpoints, $name))} { 
     @content; 
    } 
    } 
    @else { 
    @warn "no match found in breakpoint map"; 
    } 
} 

Answer 1

ブール値(min-width: 768px) and (max-width: 991px)を計算しようとすると、エラーが発生します。したがって、ブレークポイントを文字列として設定する必要があります。

サス：

$breakpoints: (
    small: '(max-width: 767px)', 
    medium: '(min-width: 768px) and (max-width: 991px)', 
    large: '(min-width: 1200px)' 
); 

@mixin respond-to($name) { 
    @if map-has-key($breakpoints, $name) { 
    @media #{map-get($breakpoints, $name)} { 
     @content; 
    } 
    } @else { 
    @warn "no match found in breakpoint map"; 
    } 
} 

a { 
    @include respond-to(medium) { 
    color: red; 
    } 
} 

CSSの出力：

@media (min-width: 768px) and (max-width: 991px) { 
    a { 
    color: red; 
    } 
} 

Sassmeister demo。