Sass 3.3 已发布

发布于 2014 年 3 月 8 日，作者 Natalie Weizenbaum

在解决了许多候选版本中的大量 bug 之后，我们终于准备好发布 Sass 3.3.0（代号 Maptastic Maple）供公众使用。此版本有很多令人兴奋的新功能，您可以在更改日志中完整阅读，但有三点我想特别提请您注意。

SassScript 中的映射SassScript 中的映射永久链接

作为语言设计者，我们大部分工作是倾听用户的反馈并据此采取行动。这比听起来要复杂：用户非常善于知道他们想要完成的确切事情，但他们往往没有意识到这如何融入大局。因此，我们会收集大量用户请求，尝试提炼出未满足的核心需求，并看看我们能否想出一些尽可能简单地满足这些需求的功能。

SassScript 映射就是一个很好的例子。我们有很多用户请求诸如变量插值之类的功能，以便他们可以编写类似 $#{$theme-name}-background-color 的代码。其他用户希望内置函数能够处理成对的列表，或者希望有一种方法可以获取传递给函数的变量的名称。我们最终意识到人们真正想要的基本功能：一种将值与名称关联起来的方法。

大多数编程语言都有映射^[1]的概念，它们是将“键”对象与“值”对象关联起来。Sass 3.3 将其作为一等数据结构添加了对这些映射的支持。语法设计得与 @media 查询中使用的语法非常相似。它们看起来像这样

$map: (key1: value1, key2: value2, key3: value3);

与列表不同，映射必须始终用括号 () 括起来，以前表示空列表的 () 现在也表示空映射；列表和映射操作都可以在其上使用。

映射不能用作 CSS 值，因为它们不是有效的 CSS 语法。但是，有一些新的内置函数允许用户定义的 mixin 和函数使用它们。以下是一些特别有用的函数

map-get($map, $key) 使用其键在映射中查找值。例如，使用上面的示例，map-get($map, key2) 将返回 value2。
map-merge($map1, $map2) 将两个映射合并在一起。$map2 中的键会覆盖 $map1 中的键，因此这也是向映射添加值的好方法。例如，map-merge($map, (key1: new-value)) 将返回 (key1: new-value, key2: value2, key3: value3)。
map-remove($map, $key) 删除映射中的值。例如，map-remove($map, $key) 将返回 (key: value2, key3: value3)。

除了新的映射函数外，所有现有的列表函数也适用于映射。列表函数会将每个映射视为一个键值对列表。例如，nth($map, 1) 将返回 (key1 value1)。不仅如此，@each 还有用于处理映射和键值对列表的新语法。例如

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

生成

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

源映射源映射永久链接

继续映射主题，Sass 3.3 附带了在编译成 CSS 时生成源映射的支持。源映射是一种标准格式，用于告诉浏览器它们使用的文件是如何生成的。对于 Sass 来说，这意味着浏览器的开发工具现在可以准确地告诉您每个样式规则来自 Sass 源文件的哪一行。目前，这在 Chrome 中得到了很好的支持，但希望其他浏览器很快会添加支持。

从命令行编译 Sass 时，要生成源映射，只需传递 --sourcemap 标志即可。Sass 将自动在生成的 .css 文件旁边生成一个 .css.map 文件。然后，您只需确保您的 .scss 或 .sass 文件对浏览器可见，就可以开始了。

更灵活的 `&`更灵活的 & 永久链接

当我们发布 Sass 3.0 时，我们添加了对 SCSS 的支持，这意味着我们实际上必须解析文档中的所有选择器。这意味着您不能只是将父选择器 & 放置在选择器的任何位置。总的来说，这是一个改进：它捕获了更多错误并鼓励用户编写更灵活的 mixin。

不幸的是，它也使一个重要的用例变得更加困难。随着 BEM、OOCSS 和 SMACSS 流行度的提高，人们越来越感兴趣向类添加后缀。使用 Sass 时，他们希望编写 mixin 来执行此操作，而对 & 的限制使得这样做非常困难。

在 Sass 3.3 中，我们正在放宽这些限制。您现在可以编写 &-suffix（或 &_suffix，或者如果您真的想的话，甚至可以编写 &suffix），Sass 将使其生效。如果这无法应用——例如，如果 & 是 *——Sass 将打印一条有用的错误消息。

弃用：变量作用域和 `!global`弃用：变量作用域和 !global 永久链接

我们并不总是第一次就能把所有事情都做好，为了使 Sass 成为最好的语言，我们偶尔需要改变旧的行为。有时，这种情况会以可能导致现有样式表停止工作的方式发生，因此我们有一项政策，即针对将来要更改的样式表打印警告。

Sass 3.3 添加了一些弃用，但迄今为止最大的一项与变量作用域的工作方式有关。到目前为止，当您在 Sass 中的函数、mixin 或 CSS 规则中编写 $var: value 时，它可以执行以下两件事之一。如果存在名为 $var 的全局变量，它将覆盖该变量。否则，它将创建一个仅在当前花括号集中可见的局部变量。

这是一个相当大的问题，因为任何给定的变量赋值都可能潜在地修改一个它无法知道其存在的变量。我们希望迁移到一个更好的系统，在该系统中，在局部作用域中分配给变量不会覆盖全局变量，除非赋值明确说明这样做，如 $var: value !global。

为了避免破坏现有样式表，我们尚未进行此更改。相反，如果局部声明覆盖了全局变量，我们现在会打印一条弃用警告，建议用户添加 !global。现在，!global 除了使警告消失之外，没有其他作用，但在将来的版本中，它将按我上面描述的那样工作。

就是这样就是这样永久链接

实际上，还有更多内容，但这是我在本文中所能容纳的全部内容。如果您想查看所有新功能，请查看更改日志。您也可以在 SassMeister 或您自己的计算机上运行 gem update sass 来试用新功能。尽情享受！

有些语言称它们为“哈希”、“字典”或“关联数组”。JavaScript 由于奇怪的历史原因将它们称为“对象”。 ↩︎

Sass 3.3 已 发布

SassScript 中的映射SassScript 中的映射 永久链接