为什么我们在 SASS 中编写这样的媒体查询?

Question

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

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

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

但在屁股上，它将是：

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

如您所见，心烦意乱！

SASS在编译后如何看待？

Answer 1

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

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

Answer 2

通过在选择器内移动媒体查询，您可以在同一个位置组织与组件相关的所有样式。当您选择以 CSS 方式执行此操作时，您将根据媒体查询组织样式。这将使您对组件在大型项目和大型文件中的外观有一个糟糕的概述。