Question

我有一组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%);

我只是在寻找一些建议，因为我认为你不能改变减轻功能的输出。

Answer 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);
}

Sass减轻了rgb中的函数输出

1 个答案: