具有CSS颜色模块第4级的color函数的Alpha通道

问题描述

我正在尝试使用Sass @mixin，它提供对display-p3 color-space的支持，并且在不支持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,$blue,$alpha);
    #{$property}:
      rgba(
        color(display-p3 ($red / 255) ($green / 255) ($blue / 255)),$alpha
      );
  }
}

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

// Declarations
.foo {
  @include color-spaces(background-color,#ff0);
  @include color-spaces(color,rgb(255,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,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,0.5);
  color: rgba(color(display-p3 0 0.31373 0.62745),0.5);
}

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

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

我很欣赏这是相当新的尝试。但是，没有人知道一种方法，通过该方法可以将Alpha通道与color()函数结合使用，以实现display-p3颜色空间的透明性？

解决方法

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

似乎那里有冲突的信息... color()函数能够接受第四个参数（对于alpha通道）。 CSS Tricks article的这个有用的Ollie Williams很好地解释了这一点。

正确的总谱如下：

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

尽管这些是不同的色彩空间，但这大致等同于：

rgba(255,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,$blue,$alpha);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255) unquote('/') ($alpha * 100%));
  }
}