将十六进制转换为 RGBa

Question

我想将十六进制颜色转换为 RGB，但在网上搜索我了解到我可以使用 SASS 但只能使用 RGBa。

所以考虑一下这段代码：

@mixin hex-rgba($hexcolor, $opacity) {
  background-color: rgba($hexcolor, $opacity); 
}

div {
  @include hex-rgba(#333333, .3);
}

返回：

div {
  background-color: rgba(51, 51, 51, 0.3);
}

但如果我将 alpha 设置为 1（或 100%），它会返回十六进制值：

div {
  @include hex-rgba(#333333, 1);
}

div {
  background-color: #333333;
}

即使 alpha 为 100%，我如何获得 rgba 值？

以某种方式

div {
  background-color: rgba(51, 51, 51, 1);
}

已解决

@function rgb($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgb(#{$red},#{$green},#{$blue})");
}

:root {
  --color: #{rgb(#ffffff)};
}

Answer 1

试试这个代码

 @mixin hex-rgba($hexcolor, $opacity) {
  @if $opacity == 1 or $opacity == 100% {

  background-color:hex($hexcolor);
  }
  @else {
   background-color: rgba($hexcolor, $opacity);
  }
}


@function hex($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
}

div {
  @include hex-rgba(#333333, 0.2);
}

试试这个更新后的代码

@function hex($hexcolor,$opacity){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @if $opacity == 1 or $opacity == 100% {
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
  }
  @else{
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$opacity})");
  }
}

body {
  background-color:#{hex(#333333,0.5)};
}

:root {
  --color: #{hex(#ff0000,1)};
}
div{
  height:50px;
  width: 50px;
  background-color: var(--color);
}

Working Fiddle For Updated Code

你也可以试试萨斯迈斯特

Working Fiddle OLD

Sassmeister

Answer 2

如果你只想要RGB，试试这个

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

color: toRGB(#ffffff); /* returns color: rgb(255, 255, 255)*/

Answer 3

如果有人想用 scss 切换颜色主题。

新方法（不需要函数或新变量。）

学分：https://stackoverflow.com/a/56951626/11685855

.div {
  background-color: var(--body-color);
}

.div::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: var(--body-color);
  opacity: 0.5;
}

旧方法（使用函数）

// To convert hex to RGB codes.
@function hexToRGB($hex) {

      @return red($hex), green($hex), blue($hex); // Plain comma seperated RGB values.
     
}

$body-color: #fefbfb; // Light Theme
$body-color-d: #0f111a; // Dark Theme

:root {
  --body-color-rgb: #{hexToRGB($body-color)}; // Calling 
}

body.dark{
  --body-color: #{$body-color-d};
}

body {
  background-color: var(--body-color);
}

.div {
  background-color: rgba(var(--body-color-rgb), 0.9);
}

致谢：https://medium.com/techhive-io/how-to-use-css-variables-with-sass-mixins-671e1f6067b3

总结：Alpha 不适用于 rgba 中的根十六进制变量。例如：rgba(var(--body-color) ,1) 但是 rgba(#fefbfb, 1) 可以。但是这种方式不可能进行主题切换。 阅读以上文章了解更多信息。