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关键字。

纯粹CSS（你将拥有什么）。你想要那个

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

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

所以在SASS

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

Answer 3

这里有一些在SASS中使用的例子。注意我使用的是SASS语法而不是SCSS 首先，您为宽度创建变量

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

然后你创建你的mixins

=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

然后你可以在任何地方使用这些mixins。在容器，身体元素，任何需要的地方使用它们

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

如何在SASS中使用@media？

3 个答案: