为什么我们在 sass 中编写这样的媒体查询？答案

【问题标题】：why we write media queries like that in sass?为什么我们在 sass 中编写这样的媒体查询？
【发布时间】：2019-12-21 20:52:48
【问题描述】：

我试图理解 sass 中媒体查询背后的逻辑。

例如，如果我想在 css 中为我的容器设置媒体查询将是：

@media only screen and (max-width: 37em){
.container{
      some code
  }
}

但在 sass 中它将是：

.container {
  @media only screen and (max-width: $bp-medium){
    some code
  }
}

如你所见，心烦意乱！

sass 编译后的外观如何？

【问题讨论】：

【解决方案1】：

在 sass 中，你可以例如设置标准值 - 就像在您的示例 $bp-medium 中一样。如果将此值设置为37em，它的行为将类似于您的 css 示例。

顺便说一下，sass 也可以使用 css 方式。不过不推荐，因为这是 sass 的强大之处。

【讨论】：

【解决方案2】：

通过在选择器中移动媒体查询，您可以将与组件相关的所有样式组织在同一个位置。当您选择使用 CSS 方式时，您将根据媒体查询组织样式。这将使您对组件在大型项目和大型文件中的外观有一个不好的了解。

【讨论】：