Sass 3.5 发布 候选版本

我刚刚按下按钮发布了 Sass 3.5.0-rc.1。如果感觉距离上一个版本发布已经有一段时间了，那是真的！但这是有充分理由的。我们决定在 3.5 版本发布后进入功能冻结阶段，以便为 libsass（Sass 的超高速 C++ 实现）提供时间，使其功能与 Sass 3.4 平齐。Libsass 比 Sass 年轻得多，而且 C++ 通常比 Ruby 慢，因此这需要一些时间。但结果证明是值得的：libsass 现在几乎与 Ruby Sass 完全兼容，仅在一些小的 bug 上存在差异。

在功能冻结解除后，我们主要专注于设计新的模块系统，这将是 Sass 4.0 的核心功能。但我们也抽出了一些时间添加了一些新功能，这些功能是本次 发布的重点。

CSS 自定义属性支持CSS 自定义属性支持 永久链接

Sass 3.5 现在完全支持 CSS 自定义属性。这对我们来说是一个特别的挑战，因为自定义属性语法非常宽泛。你几乎可以在右侧放置任何东西。例如，这完全有效，有意义的 CSS

.wacky-property {
  --property: .%(#@$~`^[^_+]<;:"}"|?)*+;
}

特别是，这意味着 SassScript 表达式也是有效的 CSS，这对于我们实现 CSS 兼容性的目标提出了一个问题。在任何可能的情况下，我们都希望有效的 CSS 在 Sass 中与在 CSS 中具有相同的含义。因此，像对待普通属性一样对待自定义属性（我们在 3.4 中做到的）并不是一个好的解决方案。一些有效的 CSS 不仅被解释为不同的含义，而且有些甚至不可能实现。以下 CSS（直接取自 Polymer 文档）在 Sass 中几乎不可能表示

:host {
  --my-toolbar-theme: {
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
  }
}

另一方面，我们需要某种方法将动态 SassScript 值包含在自定义属性中。因此，我们决定采取折衷方案：我们将像处理选择器和 @规则值一样处理自定义属性，并且只允许 #{} 作为包含 Sass 值的方法。虽然从技术上讲，这只是普通的 CSS，但它是一个非常小的表面积，并且非常容易转义，所以我们不太担心。这意味着在 3.5 中你可以 编写

:host {
  --my-toolbar-theme: {
    background-color: #{$toolbar-background};
    border-radius: 4px;
    border: 1px solid gray;
  }
}

新的数据类型：一等函数新的数据类型：一等函数 永久链接

为了准备 Sass 4.0 中即将推出的模块系统，3.5 添加了一种新的数据类型：一等函数。这只是指代函数的一种更具体的方式，而不是仅仅指代它的名称。你可以通过将函数名称传递给 get-function($name) 来获取一等函数，并且可以在你过去传递函数 名称的地方将其传递给 call()。

你可能想知道，“这有什么用？我之前可以直接传递函数名称。” 好吧，现在，Sass 具有全局作用域。所有函数（以及变量、mixin 和选择器）都对稍后执行的任何代码可见。这使得某些东西（例如 call()）变得简单，但也导致了许多问题。意外覆盖在其他地方定义的变量或函数太容易了，而且很难确定任何给定名称最初是在哪里 定义的。

我们还没有准备好广泛讨论我们关于 4.0 模块系统的计划，但我们确定的一件事是，它不会使用全局作用域。每个 Sass 文件只能看到已定义的有限数量的名称，特别是 Sass 库将无法看到导入它们的最终用户样式表中定义的任何内容。一等函数允许用户将他们定义的函数传递给 库。

任何当前正在传递函数名称作为字符串的样式表都应该切换到传递一等函数。为此，使用字符串调用 call() 已被弃用。它实际上直到 4.0 才会中断，那时它也没有多大用处，但我们强烈建议用户立即切换到 get-function()。

新语法：方括号列表新语法：方括号列表 永久链接

新的 CSS 网格布局 模块添加了一种新的语法类型：用方括号括起来 的标识符。我们始终致力于与 CSS 完全兼容，这意味着我们也需要支持这些括号。以下是在 CSS 中的样子

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

解决方案很明确：Sass 已经有一个 列表数据类型，所以我们只需要允许列表使用方括号即可。因此 [first] 就是一个包含未加引号的字符串 first 的列表。与所有 Sass 列表一样，方括号列表可以是空格分隔或逗号分隔的：[foo bar baz] 和 [foo, bar, baz] 都是包含三个 元素的列表。

我们还为方括号列表添加了函数支持。is-bracketed($list) 函数返回列表是否为方括号列表，join() 有一个新的 $bracketed 参数，允许调用者选择结果列表是否具有括号（默认情况下，如果第一个列表 具有括号，则结果也具有括号）。

较小的功能较小的功能永久链接

我们添加了一个 content-exists() 函数，该函数返回当前 mixin 是否传递了内容块。这允许 mixin 可选地接受内容块，而不是必须定义一个接受内容的 mixin 和一个不接受内容的 mixin。

我们添加了向参数列表添加尾随逗号的功能。这与列表和 映射的行为相匹配。

我们在 invert() 函数中添加了一个 $weight 参数。这是一个介于 0% 和 100% 之间的百分比，表示结果颜色应反转的程度。默认为 100%。

发布之路发布之路 永久链接

这只是一个候选版本，但它已经处于我们可以将其作为最终版本发布的状态。我们之所以不这样做，是因为现在我们已经实现了与 libsass 的功能兼容性，我们致力于保持 这种状态。

不幸的是，自从 Marcel Greter 离开该项目 以来，libsass 最近进展缓慢。如果您或您认识的人有兴趣参与一个将惠及数千人的项目，我们仍在寻找新的 贡献者！

在实现 libsass 兼容性之前，3.5 将保持候选版本状态。但这不要阻止您尝试它并告诉我们您的想法！我们始终乐于在 邮件列表 中听取反馈！