在SASS文件中添加媒体查询

Question

我在新项目中第一次使用Bootstrap和SASS。

我刚在SASS文件中添加了以下行，并使用Prespos编译，

@media (min-width: $screen-sm-min){
#myemail
  padding-top: 20px
}

令人惊讶的是，它显示以下错误，

  

无法编译style.sass |错误：“}”之后的CSS无效：预期的1个选择器或at-rule，为“{}”

     

13 | padding-top：20px

     

14 | }

我已经尝试了几种解决方法，幸运的是使用以下代码成功编译并进行了非常小的更改（只是将右大括号移到上一行），

@media (min-width: $screen-sm-min){
#myemail
  padding-top: 20px}

我想知道SASS的工作方式。你能解释这种行为背后的具体原因吗？

Answer 1

你忘了#myemail选择器周围的大括号。

@media (min-width: $screen-sm-min) {
  #myemail {
    padding-top: 20px;
  }
}

在一个媒体查询下可能会有一些表达式：

@media (min-width: $screen-sm-min) {
  .one {
    ...
  }

  .two {
    ...
  }

  .three {
    ...
  }
}

你还可以在规则中查询白色媒体：

#myemail {
  padding-top: ...

  @media (min-width: $screen-sm-min) {
    padding-top: 20px;
  }
}