1

我正在试验一个 Sass @mixin，它提供对display-p3 颜色空间的支持，并优雅地降级到sRGB不支持display-p3. 目前，只有 Safari 支持此规范。

@mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}:
      rgba(
        color(display-p3 ($red / 255) ($green / 255) ($blue / 255)),
        $alpha
      );
  }
}

在上面@mixin我假设我可以将color()函数作为参数传递给rgba()函数，如果颜色需要 alpha 通道。一些示例用法如下：

// Declarations
.foo {
  @include color-spaces(background-color, #ff0);
  @include color-spaces(color, rgb(255, 0, 100));
}

.bar {
  @include color-spaces(border-color, #ffff);
  @include color-spaces(color, rgba(0, 80, 160, 0.5));
}

// Results
.foo {
  background-color: #ff0;
  background-color: color(display-p3 1 1 0);
  color: rgb(255, 0, 100);
  color: color(display-p3 1 0 0.39216);
}
.bar {
  border-color: #ffff;
  border-color: rgba(color(display-p3 1 1 1), 1);
  color: rgba(0, 80, 160, 0.5);
  color: rgba(color(display-p3 0 0.31373 0.62745), 0.5);
}

我的假设是不正确的。color()将函数作为参数传递给rgba()参数是无效的。我也不能将第四个数字参数传递给color()函数。它只接受三个。

在这种情况下，使用该opacity属性作为替代方案也不是一个合理的解决方案。将不透明度值传递给相关选择器将影响所有子元素的不透明度。

我很欣赏这是相当新的和实验性的。但是，有谁知道我可以通过一个 alpha 通道和一个color()函数来实现display-p3颜色空间透明度的方法？？？

4

1 回答 1

0

我已经找到了这个问题的答案。我会发布答案，以防将来随着该规范变得越来越普遍，它可以帮助某人。

那里似乎有相互矛盾的信息......该color()函数能够采用第四个参数（对于 alpha 通道）。Ollie Williams的这篇有用的CSS Tricks 文章很好地解释了这一点。

正确的sytanx如下：

color(display-p3 1 0 0 / 50%);

虽然这些是不同的色彩空间，但大致相当于：

rgba(255, 0, 0, 0.5);

这意味着我可以@mixin通过完全删除第二个rgba()函数调用来更新我的，并且在上下文需要时仅依靠该color()函数传递一个 alpha 通道：

@mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255) unquote('/') ($alpha * 100%));
  }
}
于 2020-08-18T08:35:41.270 回答