功能关注：CSS 导入和 CSS 兼容性

Dart Sass 1.11 刚刚发布，并带来了一些新功能。这是一个令人兴奋的时刻，因为它标志着自 Dart Sass 发布以来添加到该语言中的第一个主要新功能。它也是第一个包含经过新流程的功能的版本，从 提案 到 测试 再到 实现。

CSS 导入CSS 导入永久链接

Dart Sass 1.11 中最大的功能是对导入普通 CSS 文件的支持。这是一个期待已久的功能，虽然我们最初计划等到我们推出即将推出的模块系统后再进行处理，但我们最终决定 提前实现它 。

您现在可以通过编写 @import "styles" 来导入一个 CSS 文件，例如 styles.css。该文件将被解析为纯 CSS，这意味着任何 Sass 功能（如变量、混合或插值）都将被禁止。它定义的 CSS 将成为您样式表的一部分，并且可以像任何其他样式一样进行 @extend。

有几点需要注意：因为 SCSS 是纯 CSS 的超集，它仍然会将 @import "styles.css"（带有显式扩展名）编译成 CSS 的 @import 规则。如果您想将 CSS 文件导入到您的 Sass 编译中，则必须省略扩展名。

此外，此功能尚未在 LibSass 中完全实现。它仍然具有旧的行为，它导入 CSS 文件但将其解析为 SCSS，并允许所有额外的 Sass 功能。此行为很快就会被弃用，最终它会对除纯 CSS 之外的任何内容产生错误，就像 Dart Sass 今天所做的那样。

CSS min() 和 max()CSS min() 和 max() 永久链接

Dart Sass 1.11 还添加了对 CSS 的 min() 和 max() 数学函数的支持。对于那些不熟悉的人来说，这些函数的工作方式与 calc() 非常相似，只是它们返回一系列值的最小值或最大值。例如，您可以编写 width: max(50%, 100px) 以使您的元素为父元素宽度的 50% 或 100px 宽，以较大者为准。

由于 Sass 有自己的名为 min() 和 max() 的函数，因此很难使用这些 CSS 函数……直到现在。Dart Sass 1.11 将智能地决定是使用纯 CSS 函数还是内置的 Sass 函数，具体取决于您是否传入动态 Sass 值。例如

• 如果您传递一个变量，例如 max($width, 100px)，则将调用 Sass 函数。
• 如果您调用另一个 Sass 函数，例如 max(compute-width(), 100px)，则将调用 Sass 函数。
• 如果您只使用纯 CSS 数字，例如 max(50% + 10px, 100px)，它将编译成纯 CSS 函数。
• 即使您使用插值，例如 max(50% + #{$width / 2}, #{$width})，它仍然会编译成纯 CSS 函数。

这保留了与现有 Sass 函数使用的向后兼容性，同时也允许用户以与在纯 CSS 中相同的方式使用 CSS 函数。

此功能尚未在 LibSass 或 Ruby Sass 中实现。

范围格式媒体查询范围格式媒体查询 永久链接

CSS 媒体查询级别 4 定义了一种 范围语法 用于定义某些媒体查询。

@media (width > 500px) {
  /* ... */
}

Dart Sass 1.11 添加了对这种语法的支持。它的工作方式与现有的媒体查询支持一样：您可以使用插值或纯 Sass 表达式将 Sass 逻辑注入查询中，并且它们仍然可以嵌套。

@media (width > $width) {
  @media (height < #{$height}) {
    /* ... */
  }
}

此功能尚未在 LibSass 或 Ruby Sass 中实现。

标准化标识符转义标准化标识符转义 永久链接

最后一个兼容性改进是一个极端情况，但仍然值得一提：Sass 解析标识符中转义字符的方式得到了改进，以更好地匹配 CSS 规范。

转义字符现在被规范化为标准格式，这意味着（例如）éclair 和 \E9clair 被解析为相同的值（在本例中为 éclair）。在此更改之前，如果写了一个转义字符，它将始终按原样保留，因此 str-length(\E9clair) 将返回 8，即使该标识符对 CSS 的含义与 éclair 完全相同。

我们预计这不会影响许多用户，但我们始终努力使 Sass 尽可能接近 CSS 的语义。这是朝着这个方向迈出的一小步，但很重要。

此功能尚未在 LibSass 或 Ruby Sass 中实现。