功能关注: 内容参数和颜色 函数

Dart Sass 1.15 今天发布，可在 npm 上 和 所有其他分发渠道 上获得，它带来了许多备受期待的 Sass 新功能。这也是第一个发布带有重大语言新功能的 Dart Sass，这些功能不仅仅是为了 CSS 兼容性。这是一个巨大的成就，我们打算在未来继续这种模式！

@content 参数@content 参数永久链接

接受 @content 块 的 mixin 现在可以将参数传递给这些块。这是用 @content(<arguments...>) 编写的。如果 mixin 将参数传递给它的内容块，则该 mixin 的用户必须通过编写 @include <name> using (<arguments...>) 来接受这些参数。内容块的参数列表与 mixin 的参数列表的工作方式相同，传递给它的参数 @content 与传递给 mixin 的参数的工作方式相同。

// style.scss
@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

/* style.css */
@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

有关更多详细信息，请参阅 功能提案。此功能在 LibSass 中实现，并将发布在 3.6.0 版本中。由于 Ruby Sass 已弃用 并且这不是 CSS 兼容性功能，因此它不会在 Ruby Sass 中实现。

rgb() 和 hsl() 的颜色级别 4 语法rgb() 和 hsl() 的颜色级别 4 语法 永久链接

CSS 颜色模块级别 4 引入了 rgb() 和 hsl() 函数的新语法，浏览器已经开始支持这种语法。这种语法使这些函数更加紧凑，允许指定 alpha 值而无需额外的 rgba() 和 hsla() 函数，并且看起来像 rgb(0 255 0 / 0.5) 和 hsla(0 100% 50%)。

为了支持此功能，Sass 的 rgb() 和 hsl() 函数现在接受以空格分隔的组件列表作为单个参数。如果最后一个参数是以斜杠分隔的两个数字对，则第一个数字将被视为蓝色通道或亮度（分别），第二个数字将被视为 alpha 通道。

但请注意，区分除法和 / 作为分隔符 的正常规则仍然适用！因此，如果您想传递一个变量作为 alpha 值，则需要使用旧的 rgba() 语法。我们正在 考虑此问题的可能的长期解决方案，因为 / 在 CSS 中作为分隔符的使用更加突出。

此外，新的颜色规范将 rgba() 和 hsla() 函数定义为 rgb() 和 hsl() 的纯别名，并为 rgb() 和 hsl() 添加了对四参数 rgba() 和 hsla() 语法的支持。为了匹配这种行为，Sass 也将 rgba() 和 hsla() 定义为别名，并为 rgb() 和 hsl() 添加了对它们所有定义的支持。

总而言之，这意味着以下所有函数调用在 Sass 中都得到了新的支持：

• rgb(0 255 0)、rgb(0% 100% 0%)、rgb(0 255 0 / 0.5) 和 rgb(0, 255, 0, 0.5)；
• hsl(0 100% 50%)、hsl(0 100% 50% / 0.5) 和 hsl(0, 100%, 50%, 0.5)；
• rgba(0, 255, 0) 和 hsla(0, 100%, 50%)；
• 和 rgb($color, 0.5)。

此更改完全向后兼容，因此 rgb()、hsl()、rgba() 和 hsla() 的所有先前有效的参数都将继续有效。

有关更多详细信息，请参阅 功能提案。此功能尚未在 LibSass 或 Ruby Sass 中实现。

插值 At-Rule 名称插值 At-Rule 名称 永久链接

此功能比最后两个要小一些，但它已经在待办事项列表中更久了：在 At-Rule 的名称中添加对插值的支持！这就像你期望的那样工作。

@mixin viewport($prefixes) {
  @each $prefix in $prefixes {
    @-#{$prefix}-viewport {
      @content;
    }
  }
  @viewport {
    @content;
  }
}

有关更多详细信息，请参阅 功能提案。此功能尚未在 LibSass 中实现。由于 Ruby Sass 已弃用 并且这不是 CSS 兼容性功能，因此它不会在 Ruby Sass 中实现。