Question

我想将十六进制颜色转换为RGB，但是在Web上搜索时，我了解到我可以使用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

还可以尝试 Sassmeister

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) 可以。但是主题切换是不可能的。阅读以上文章了解更多信息。

将十六进制转换为RGBa

3 个答案:

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

旧方法（使用函数）