Css Sass-将十六进制转换为RGBa以实现背景不透明度

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

@mixin背景不透明度（$color，$opacity:.3）{
背景：rgb（200,54,54）；/*后备方案*/
背景：rgba（200,54,54，$不透明）；
} 

我已经应用了

$opacity

ok，但是现在我被

$color

部分卡住了。 我将发送到混音器的颜色将是十六进制而不是RGB

我的示例使用如下：

元素{
@包括背景不透明度（#333，.5）；
}

---

如何在此混音中使用十六进制值？

您可以尝试此解决方案，这是最好的。。。url（）

可以接受单个十六进制颜色以及十进制RGB值。例如，这将很好地工作：

@mixin背景不透明度（$color，$opacity:0.3）{
背景：$color；/*后备方案*/
背景：rgba（$color，$opacity）；
}
元素{
@包括背景不透明度（#333，0.5）；
}

但是，如果您需要将十六进制颜色分解为RGB组件，则可以使用和函数来完成此操作：

$red:red（$color）；
$green：绿色（$color）；
$blue:blue（$color）；
背景：rgb（$red，$green，$blue）；/*与使用“背景：$color”相同*/
有一个内置混音器：
透明（$color，$amount）

金额应介于0到1之间

SASS有一个内置的评估值

rgba($color, $alpha)

例如

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

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

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

产出：

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

如果您需要混合来自可变透明度和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};

  }

}

你的答案很好，但似乎过于复杂。我猜透明阴影与我的问题无关，不过你能解释一下透明背景类是关于什么的吗？我想如果我不使用透明阴影混合，我就不需要它了？@RickDonohoe，据我记忆所及，z-index:1，透明背景是IEI的一个后备方案。我发誓我尝试过这个和r，b，g函数，但它不起作用。我使用的是Drupal后端的动态颜色，但这可能破坏了某些东西。尽管如此，我还是在最后对它进行了分类，并在进一步研究后找到了答案+1但是，十六进制的#（$color+$opacity）等价物是什么这可能有用。可行吗？据我所知，RGBA增加了不透明度，这意味着你可以看到它背后的元素。使用标准的
hex
，您不能这样做。谢谢。我从没想过要在rgba上试试魔咒！最好使用
rgba（$color，$alpha）
像
rgba（#000000，0.6）
，因为结果是一样的，不需要重新发明轮子我喜欢这个！非常适合现代浏览器的实现。附带说明：$amount是它将减去多少，而不是您想要设置的值。除了amount似乎是相反的意思，即您希望使其
90%
透明以获得结果
.1
奇异。没有看过文档的人都不会怀疑有“透明化”功能。非常有帮助，谢谢！回答得很好。这应该是公认的答案。谢谢<代码>$colorTheme:hsl（289,65%，47%）$crossOutColor：透明（$colorTheme，0.5）为我工作。
.my-element {
  color: rgba(0, 170, 255, 0.5);
}

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

  }

}