媒体查询、Sass 3.2 和 CodeKit

媒体查询本身就很棒。Sass 中的媒体查询也很棒。Sass 3.2 中的媒体查询将变得**非常**棒。以下是如何让 CodeKit 开始使用它。

这不是一个全新的想法。Ben Schwarz 在 7 分钟的精彩视频 中向我们展示了它的工作原理（7 个月前）。Jeff Croft 写过关于它（4 个月前）。Mason Wendell 写过关于它（3 个月前）。

魔法就在这里

您已经在 Sass 的稳定版本（3.1.2）中可以做到这一点

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

Sass 会将其转换为如下有效的 CSS

.column-1-3 {
  width: 33.3333%;
}
@media (max-width: 600px) {
  .column-1-3 {
    width: 100%;
  }
}

但是您可能希望在 CSS 中**多次多次**这样做，因为在编写时它非常方便且很有意义（而不是将它们全部放在最后，这会破坏认知关联）。

现在您陷入了重复代码的困境，而 Sass 正是为了帮助我们避免这种情况而存在的。在 Sass 3.2（处于 alpha 阶段并且已经持续很长时间了）中，有一个解决方案。我们可以编写一个@mixin，它允许我们为媒体查询“命名”。

我

1. 喜欢将媒体查询称为“断点”
2. 不喜欢根据任何特定内容为其命名，例如“iPad”
3. 喜欢童话般的比喻

所以，我这样编写我的 mixin

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

现在我可以编写如下代码

.page-wrap {
  width: 75%;
  @include breakpoint(papa-bear) { width: 60%; }
  @include breakpoint(mama-bear) { width: 80%; }
  @include breakpoint(baby-bear) { width: 95%; }
}

它将按我想要的方式工作。很酷吧？（注意：这完全是说明要点的人为代码，用法取决于项目）

但是如果你使用 CodeKit 呢？

CodeKit 仅附带 Sass 的稳定版本，目前尚不支持此功能。我不知道 Sass 3.2 何时会进入稳定版。至少已经 7 个月了，我个人很着急想让它运行起来。值得庆幸的是，CodeKit 最近发布了一个新功能，使这成为可能。

从 CodeKit 1.2 版（6449）开始，您现在可以告诉 CodeKit 使用外部编译器

以下是使用方法

1. 确保您至少拥有该版本的 CodeKit
2. 打开终端
3. 键入rvm system。我不知道这到底做了什么，但 CodeKit 无法处理安装在 rvm 目录中的 Sass。
4. 然后使用命令sudo gem install sass --pre安装 Sass 3.2 - 您可能需要输入密码。
5. Sass 现在应该安装在 /usr/bin/ 目录下
6. 打开 CodeKit 首选项，然后转到语言和 Sass/Scss
7. 在高级编译器设置下单击选择…
8. 选择该目录中的 Sass 文件

搞定。请注意，现在您将负责保持 Sass 更新。但最终，Sass 将发布 3.2 的最终版本，CodeKit 将随之更新，我们可以返回使用内部编译器。

尽情享受吧！用这种方式处理媒体查询确实令人愉快。感谢 Christopher Eppstein 对我的帮助。这提醒了我，您也可以对 Compass 做完全相同的事情，只需sudo gem install compass并将 CodeKit 指向它即可。