在SASS文件中添加媒体查询

在我的新项目中，我第一次将Bootstrap和SASS结合使用

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

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

未能编译style.sass |错误：“}”后的CSS无效：应为1个选择器或at规则，为“{}”

13 |衬垫顶部：20px

14 |}

我尝试了几种变通方法，幸运的是，通过以下代码成功编译，只做了很小的更改（只是将右大括号移到了前一行）

---

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

你忘记了选择符周围的大括号

@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;
  }
}

---

为什么我们在使用SASS而不是SCSS时需要大括号？@sathymoorthyr在SASS上移除#myemail:）周围的大括号，就像这里一样

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

  .two {
    ...
  }

  .three {
    ...
  }
}

#myemail {
  padding-top: ...

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