SASSで@mediaを使用するにはどうすればよいですか？

Question

私は、メディアクエリがSASSでどのように書かれているのか混乱しています。私は、このコード行を試してみたが、それは私にエラーがスローされます：

@media screen (max-width: 1550px) 
 
    #server-name 
 
    left: 80%

Answer 1

が欠落しているので、あなたがandキーワードを忘れてしまったタイプのエラーを持っています。あなたはそれについてもっと読むことができますhere

@media screen and (max-width: 1550px) 
    #server-name 
     left: 80% 

Answer 2

これはSASSが、純粋なCSSの問題ではありません。 andキーワードはメディアクエリーに

#server-name { 
 
    position: absolute; 
 
} 
 

 
@media screen and (max-width: 650px) { 
 
    #server-name { 
 
    left: 80%; 
 
    color: red; 
 
    } 
 
}

<div id="server-name">My name</div>

Answer 3

ここではSASSでの使用例をいくつか紹介します。私はあなたが幅

$mobile: 568px 
$tablet: 768px 
$desktop: 1024px 

のためのあなたの変数を作成SASSの構文とSCSS 第一ではないを使用しています注意してください、あなたは

=desktop 
    @media screen and (min-width: $desktop) 
    @content 

=tablet 
    @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) 
    @content 

=mobile 
    @media screen and (max-width: $tablet - 1px) 
    @content 

その後、あなたはこれらのミックスインのどこを使用することができ、あなたのミックスインを作成します。

.m-boxes-box 
    max-width: 500px 
    flex: 1 2 
    min-height: 250px 
    background-color: $soft-peach 
    margin: 10px 0 

    +tablet 
    min-width: 50% 
    +mobile 
    min-width: 100%