在 SASS 中定义断点答案

【问题标题】：Defining breakpoints in SASS在 SASS 中定义断点
【发布时间】：2014-08-05 17:47:34
【问题描述】：

我在这里很困惑。我将 Sass 用于 Bourbon Neat，但我无法使用整洁设置断点。不知何故，它们无法在移动设备和浏览器中正确显示。这是代码

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(max-width 1335px 10); 
$desktop: new-breakpoint(max-width 1920px 10);

但不知何故，它们不起作用。我应该像这样使用最小值和最大值

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(min-width 801px 10); 
$desktop: new-breakpoint(min-width 1337px 10);

请给我一些建议，因为我完全无法找到解决方案。谢谢。

【问题讨论】：

您能否补充一下您是如何实现这些定义的？

标签： css responsive-design bourbon neat

【解决方案1】：

首先，我建议在设计时首先考虑移动（小）屏幕，这意味着您应该始终使用min-width 而不是max-width，并逐步从小屏幕到大屏幕。

使用new-breakpoint()定义断点后：

$mobile: new-breakpoint(min-width 480px 4);

您已准备好通过您的样式中的 media() mixin 使用它：

.selector {
  font-size: 12px;

  @include media($mobile) {
    font-size: 18px;
  }
 }

结合起来，您应该得到以下 CSS：

/* Smallest size as default ... */
.selector {
  font-size: 12px;
}

@media screen and (min-width: 480px) {
  /* Bigger font for screens of 480px and up ... */
  .selector {
    font-size: 18px;
  }
}

如果这不是您所追求的，请发布更多关于如何使用断点的详细信息。

【讨论】：

好的，你的意思是我应该从我正在使用的断点开始最小宽度而不是最大宽度。那么针对屏幕尺寸小于 480 像素的手机呢？
您首先定义将被所有设备使用的通用样式（无论屏幕尺寸如何）。然后，您为某些屏幕尺寸覆盖特定样式（或扩展它们），从最小的开始，一直到最大。 ——这有意义吗？

【解决方案2】：

一定要@import "neat/neat-helpers";在您的 _variables.scss 或任何其他定义断点的文件中。看这里的例子：https://github.com/thoughtbot/neat#getting-started

【讨论】：