249

我有以下 Sass mixin，它是对RGBa 示例的半完整修改：

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
}

我已经申请$opacity好了，但现在我被这$color部分卡住了。我将发送到 mixin 的颜色将是 HEX 而不是 RGB。

我的示例使用将是：

element {
    @include background-opacity(#333, .5);
}

如何在这个 mixin 中使用 HEX 值？

4

5 回答 5

472

rgba() 函数可以接受单个十六进制颜色以及十进制 RGB 值。例如，这可以正常工作：

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

但是，如果您需要将十六进制颜色分解为 RGB 分量，则可以使用red()、green()和blue()函数来执行此操作：

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */
于 2012-06-07T21:00:24.603 回答
149

有一个内置的mixin：transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

金额应在 0 到 1 之间；

官方 Sass 文档（模块：Sass::Script::Functions）

于 2015-08-31T09:26:32.900 回答
51

SASS 有一个内置的rgba() 函数来评估值。

rgba($color, $alpha)

例如

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

使用您自己的变量的示例：

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

输出：

.my-element {
  color: rgba(0, 170, 255, 0.5);
}
于 2017-05-04T22:48:11.603 回答
6

你可以试试这个解决方案，是最好的... url( github )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);
于 2012-06-07T10:06:16.640 回答
1

如果您需要混合来自变量和 alpha 透明度的颜色，并且使用包含rgba()函数的解决方案，您会收到类似的错误

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   ╷
   │       background-color: rgba(#{$color}, 0.3);
   │                         ^^^^^^^^^^^^^^^^^^^^

像这样的东西可能有用。

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}
于 2019-10-01T10:06:06.810 回答