如何在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中使用的例子。请注意我使用SASS语法而不是SCSS 月1日您创建变量宽度

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

然后你创建你的混入

=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%