#016：在 Sass 中使用媒体查询 | CSS-Tricks

我们介绍了 CSS 中 `@media` 查询的概念。

在这个项目中使用 Sass 允许我们做很多事情，其中之一就是保持 DRY（不要重复自己）。我们通过设置颜色和大小变量做到了这一点。我们用字体栈也做到了。现在我们又用媒体查询来做这件事。每当我们需要一个媒体查询时，我们现在都有一个可以使用的 @mixin。这样，如果我们需要调整它们，我们只需在一个地方更改它们。

我们不会将媒体查询命名为“iPad”或任何过于具体的东西，而是使用一些任意但易于理解的名称，例如“小熊”和“大熊”。

我们从宽屏开始，然后逐渐缩窄，直到导航看起来不好，这就是我们的第一个媒体查询断点。在这一点上，我们将导航分成两行四列，而不是一行八列。我们必须调整阴影才能使其看起来正确。

我们还会在某些媒体查询中调整页面包装的宽度，这意味着我们也需要调整徽标的工作方式。

Gray Ghost Visuals

# 2012年9月9日

Chris，

当我第一次听到你提到这个断点命名约定时，我心想“太棒了！”，但在使用这种技术之后，我心想“它们之间是什么？”

小熊？迷你熊？表弟熊？爷爷熊？如果你的设计中有多于 3 个断点怎么办？

Chris Coyier

评论永久链接# 2012年9月9日

当然，听起来不错。任何适合你的（并且你能记住的）方法都可以。也许 Alpha、Beta、Gamma 等。或者类似于你可能设置用于跟踪 z-index 的任意编号。100、200、300 等——这可能很好，因为中间总是有空间。

Michael McKenzie

# 2012年9月9日

你是如何防止字体图标在导航文字上方跳动的？当我开始缩小页面以查找断点时，当到达断点时，图标会跳到文字上方。

Amrit

# 2012年9月9日

Chris，媒体查询的妙用，我今天又学到了一点，不过在将这种样式应用到我的一个项目中时，我发现它在最终的 css 样式表中创建了媒体查询的重复实例。

因此，在 CSS 文档中，它不会输出…

@media(max-width:1000px)
“此宽度的所有属性”

..而是输出…

“属性”
@media(max-width:1000px)…

“另一个属性”
@media(max-width:1000px)…

因此，尽管你在开发过程中没有重复自己，但在处理后的文件中却重复了。你认为为了提高效率付出这么小的代价值得吗？

Chris Coyier

评论永久链接# 2012年9月9日

你认为为了提高效率付出这么小的代价值得吗？

我的确这么认为。首先，gzip 会把这些重复的东西当作早餐吃掉。此外，Sass 开发人员也意识到了这一点，并且目前正在考虑一些改进方法。

Michael McKenzie

# 2012年9月9日

不用管了，一旦我应用了媒体查询来捕获它，它们就停止跳动了。

andyunleash

# 2012年9月10日

关于 SASS/Codekit——我如何知道我是否使用的是最新版本的 SASS？我知道 3.2 在 8 月份发布了，但是有没有办法在 Codekit 中检查和确认？

andyunleash

# 2012年9月10日

啊，不用管了——> http://d.pr/i/KxBJ

Rodrigo Ibarra

# 2012年9月10日

等等…在 main-nav 中，你现在有了类似这样的东西

.main-nav{
   a { width: (100%/8 - 0.1); }
}

我理解它是如何工作的，但我以前从未见过，就支持和功能而言，它是如何工作的…

Chris Coyier

评论永久链接# 2012年9月10日
那只是 Sass 中的数学运算。

该行代码编译成
```
.main-nav a { width: 12.4%; }
```
0.1 是一个笨拙的修复，因为子像素舍入有时会出错，并将下一个导航项向下推到下一行。

我认为它在 Sass 中的写法更清晰地表达了这个想法。从 100% 开始，有 8 个菜单项，因此除以该值，然后进行笨拙的修复。而不是只在那里放计算后的值…

Seth Hall

# 2012年9月12日

另一个很棒的视频。虽然视频有点模糊。只是我一个人这样觉得，还是 Vimeo 上传/压缩的问题？

Seth Hall

# 2012年9月12日

有没有可能在你的代码块中实现一个复制到剪贴板的功能。我知道有点吹毛求疵，但非常有用。我相信你已经考虑过这一点，并且有充分的理由不实现它，我只是想请求这个功能。和平。

Chris Coyier

评论永久链接# 2012年9月12日

我以前有这个功能，但说实话，它有点像一个笨拙的烂摊子（ZeroClipboard 等）。还会增加页面的权重（理论上可以按需加载，但我们想在这里变得多么复杂？=））。

真正的原因是，当我有这个功能并参考我自己的网站（我经常这样做）时，我甚至没有使用它。我更喜欢像往常一样选择和复制。因此，本着这种精神，我确保网站上的代码易于复制和粘贴（不会出现行号或其他奇怪的垃圾）。

webifish

# 2012年9月14日

哦，我真的很开始喜欢这个了！很高兴看到你也在寻找那个灰色字体颜色时遇到了恼人的愚蠢问题…我可以建议我们对视频添加某种指示，以表明哪些视频已经观看过？并且是否有可能添加一个“下载所有视频”的链接？感谢你做这些！我已经学到了很多东西。

Aurel

# 2012年9月16日

很棒！媒体查询的这种命名约定感觉很棒。

FLDLVL

# 2012年9月16日

我确定这是一个愚蠢的问题，但我一直被“语法错误：在“…int(mama-bear) “之后无效的 CSS：期望“}”，但在第 74 行是“{”。也许有人可以帮我解决一下。SASS 3.2.1 已安装。我是新手，请轻点。

@mixin breakpoint($point) {
  @if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
}

@include breakpoint(mama-bear) {
  background: red;
}

Devin Dombrowski

# 2012年9月19日

将你的断点包装在选择器中

@mixin breakpoint($point) { 
  @if $point == mama-bear { 
    @media (max-width: 1250px) { @content; } 
  }
} 

body { 
  @include breakpoint(mama-bear) { background: red; } 
}

[email protected]

# 2012年9月20日

嘿，Chris，

视频 #15 和 #16 之间有间隙。例如，你没有展示如何应用 :hover 状态。当我自己不得不弄清楚新东西时，这很难理解，尤其是对于像我这样的新手。

Gary A

评论永久链接# 2013年3月3日
将视频暂停在 6:15 处。查看第 95 到 98 行的代码。那里是悬停效果。
```
&:hover, &:focus {
  // stuff here 
}
```
如果你想要过渡效果，在下面添加
```
@include transition(background-color 0.3s ease-in, color 0.35s ease-out);
```

[email protected]

# 2012年10月8日

一些评论

1) 我喜欢它如何展示使用内容（在本例中为导航）来确定断点，而不是 iPhone/iPad 等。

2) 使用 SASS mixin 以这种方式在断点处设置属性非常有道理。在我看来，它应该一直都是这样。

3) 截至 2012 年 10 月，Codekit 使用 SASS 3.2.1，因此大家应该可以使用了。

Dean Birkett

# 2012年10月20日

对于使用 ScoutApp 的 Windows 用户。它目前没有使用 SASS 3.2，因此这会导致你出现大量错误。

修复方法

1) https://github.com/mhs/scout-app/downloads – 获取最新版本，在撰写本文时，它处于 alpha 阶段，请注意。

2) 如果你也在使用 Windows 7，并在运行时遇到错误，此线程可能会有帮助——https://github.com/mhs/scout-app/issues/19

Gary A

评论永久链接# 2013年3月3日

我相信 ScoutApp 现在也使用 3.2 了。

Ahrengot

# 2012年12月6日

太棒了！我之前不知道可以在 mixin 中引用 @content。我一直在寻找一种方法来做类似的事情。例如：

div.box {
    @include do-stuff-to-parent();
}

@mixin do-stuff-to-parent() {
    padding: 2em;
    background: #bada55;

    @content;
}

Jeffrey Walmsley

# 2013年3月21日

您在屏幕录制中用来测量像素的工具是什么？从您的视频中，您似乎只需在任何程序中点击并拖动，就可以获得像素距离。

评论

发表评论 取消回复

发表评论取消回复