結合媒體查詢語句

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

Sass試圖計算布爾值(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。