rgb 中的 Sass 减轻功能输出答案

【问题标题】：Sass lighten function output in rgbrgb 中的 Sass 减轻功能输出
【发布时间】：2015-04-24 17:42:41
【问题描述】：

我有一组 sass 配置变量：

$color-primary:     (68, 26, 103);   
$color-seconday:    (0, 153, 160);   
$color-tertiary:    (172, 165, 22);  
$color-black:       (0, 0 ,0 );      
$color-white:       (255, 255 ,255); 
$color-link:        (0, 133, 178);

我有一个@mixin 来获取颜色并输出 rgba（如果已设置）和 rgb 后备：

@mixin rgba($property, $color, $opacity: 1) {
  $rgb-start: "rgb(";
  $rgba-start: "rgba(";
  $color-end: ")";

  #{$property}: #{$rgb-start} $color #{$color-end};

  @if $opacity != 1 {
    #{$property}: #{$rgba-start} $color, $opacity #{$color-end};
  }
}

问题是我还有一些其他变量使用 sass 的lighten 函数，然后以十六进制输出颜色，这对我的新 @mixin rgba 不是特别有用。

$color-grey-100:    rgb(0, 0, 0);
$color-grey-80:     lighten($color-grey-100, 20%);
$color-grey-60:     lighten($color-grey-100, 40%);
$color-grey-40:     lighten($color-grey-100, 60%);
$color-grey-20:     lighten($color-grey-100, 80%);

我只是在寻找一些建议，因为我认为您无法更改 lighten 函数的输出。

【问题讨论】：

为什么会出现这个问题？ Sass 总是以最短的格式输出颜色，即十六进制。
因为我的 rgba mixin 采用 rgb 颜色，因此它输出 color: rgb#ccc;
这不能回答我的问题。如果您只是使用颜色开始而不是包含看起来像颜色的字符串，则可以将其传递给任何颜色函数。现在为什么它是 rgb 而不是 hex 如此重要？
我已阅读您的问题。在声明变量时，为了方便起见，您更喜欢使用 rgb，很好。我在问为什么输出必须是 rgb。
SASS color variable not working inside darken() 的可能重复项

标签： colors sass mixins

【解决方案1】：

如果您想确保部分透明的颜色对于缺乏 rgba 支持的浏览器具有可靠的回退，您只需要操作透明度。

@mixin graceful-color($prop, $color) {
  @if alpha($color) < 1 {
    #{$prop}: opacify($color, 1);
  }
  #{$prop}: $color;
}

.foo {
  @include graceful-color(color, rgb(255, 255, 255));
  @include graceful-color(background, rgba(255, 0, 0, 0.5));
}

输出：

.foo {
  color: white;
  background: red;
  background: rgba(255, 0, 0, 0.5);
}

【讨论】：