使用 var scss sass 转换不透明度答案

【问题标题】：Convert opacity with var scss sass使用 var scss sass 转换不透明度
【发布时间】：2022-02-20 23:47:47
【问题描述】：

我有一些这样的财产

::root {
  --light-grey: #EFEFEF;
}

.content-wrapper {
  background-color: rgba(#EFEFEF, .4);
  border-radius: 8px;
  padding: 25px 33px;
}

但是当我尝试时

.content-wrapper {
  background-color: rgba(var(--light-grey), .4);
  border-radius: 8px;
  padding: 25px 33px;
}

这个不行，灰色背景不显示？

【问题讨论】：

rgba需要十进制数字，而不是十六进制。
我已经更新了我的答案，为您提供可能的解决方案

标签： sass css-variables scss-mixins

【解决方案1】：

很遗憾，您不能将 HEX 变量与 alpha 一起使用。但是您可以将 HEX 颜色转换为该颜色的 RGB 版本，并像 CSS 变量一样使用它，并具有您想要的 alpha 透明度。

--color-primary: #ff6347;
--color-primary-rgb: 255, 99, 71;
...

此代码不起作用：

color: rgba(var(--color-primary), .5);

但这会：

color: rgba(var(--color-primary-rgb), .5);

所以，假设我们有颜色的 SCSS 映射，我们可以为 HEX 和 RGB 生成 CSS 变量，生成带背景的类：

$colors: (
  "primary": #ff6347,
  "secondary": #962ba2
);

// generating root variables
:root {
  @each $color, $value in $colors {
    --color-#{$color}: #{$value};
    --color-#{$color}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
  }
}

// generate backgrounds HEX, RGB variants
@mixin background {
  @each $color, $value in $colors {
    &-#{$color} {
      background: var(--color-#{$color});
    }
    
    &-#{$color}-rgb {
      --opacity: .5;
      background: rgba(var(--color-#{$color}-rgb), var(--opacity));
    }
  }
}

.bg {
  @include background;
}

此 SCSS 代码的输出将是：

:root {
  --color-primary: #ff6347;
  --color-primary-rgb: 255, 99, 71;
  --color-secondary: #962ba2;
  --color-secondary-rgb: 150, 43, 162;
}

.bg-primary {
  background: var(--color-primary);
}
.bg-primary-rgb {
  --opacity: .5;
  background: rgba(var(--color-primary-rgb), var(--opacity));
}
.bg-secondary {
  background: var(--color-secondary);
}
.bg-secondary-rgb {
  --opacity: .5;
  background: rgba(var(--color-secondary-rgb), var(--opacity));
}

这里是代码片段演示，link to CodePen with this code:

:root {
  --color-primary: #ff6347;
  --color-primary-rgb: 255, 99, 71;
  --color-secondary: #962ba2;
  --color-secondary-rgb: 150, 43, 162;
}

.bg-primary {
  background: var(--color-primary);
}

.bg-primary-rgb {
  --opacity: .5;
  background: rgba(var(--color-primary-rgb), var(--opacity));
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-secondary-rgb {
  --opacity: .5;
  background: rgba(var(--color-secondary-rgb), var(--opacity));
}

body {
  background: #1d1e22;
}

.row {
  display: flex;
  column-gap: 0.25rem;
  margin-bottom: 1rem;
}

.sq {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  width: 10rem;
  aspect-ratio: 1/1;
}

<div class="row">
  <div class="sq bg-primary">
    primary
  </div>
  <div class="sq bg-primary-rgb">
    primary <br /> opacity 0.5
  </div>

  <div class="sq bg-primary-rgb" style="--opacity: .3">
    primary <br /> opacity 0.3
  </div>
</div>

<div class="row">
  <div class="sq bg-secondary">
    secondary
  </div>
  <div class="sq bg-secondary-rgb">
    secondary <br /> opacity 0.5
  </div>

  <div class="sq bg-secondary-rgb" style="--opacity: .7">
    secondary <br /> opacity 0.7
  </div>
</div>

【讨论】：