Sassにメディアクエリを書き込む方法は？

Question

私はSassでメディアクエリを書く方法を見つけようとしていました。これは私のコード

devices: ("sphone","phone","tablet") 
 
$breakpoints: (\t width2: ('sphone' : 320, 'phone' : 360, 'tablet' : 600), height2: ('sphone' : 509, 'phone' : 583, 'tablet' : 952)) 
 

 
=screen-width($device) 
 
    @each $name in $devices 
 
    @if $device != $name 
 
     @error "No device of such name" 
 
    $media: (max-width: map-get(map-get($breakpoints,"width2"),$device) + px) 
 
    @media screen only and ($media) 
 
    @content 
 
\t \t 
 
\t \t 
 
.hello 
 
    background: #333 
 
    @include screen-width("mobile") 
 
    background: #444 
 

私はSASSで同じことをコンパイルしようとしていますが、それは私に次のエラーをスローし続けています。どうしてか分かりません。

Properties are only allowed within rules, directives, mixin includes, or other properties. 

洞察？

Answer 1

コードにエラーがあり、$が変数$devicesにありません。 @include screen-width("mobile")と書いてありますが、モバイルはデバイスリストにありません。 $mediaの変数max-widthは文字列でなければならず、次に補間を使用して@mediaルールを追加する必要があります。

@eachループの比較は間違っていますが、私はこれを現時点で解決していません。このコードの動作：

$devices: ("sphone","phone","tablet") 
$breakpoints: (width2: ('sphone' : 320, 'phone' : 360, 'tablet' : 600), height2: ('sphone' : 509, 'phone' : 583, 'tablet' : 952)) 

=screen-width($device) 
    $media: "max-width:" map-get(map-get($breakpoints,"width2"),$device) + px 
    @media screen only and (#{$media}) 
    @content 

.hello 
    background: #333 
    @include screen-width("sphone") 
    background: #444