我知道OP没有使用预处理器，但如果以下信息是这里答案的一部分，我会得到帮助(我还不能评论，否则我会评论@BoltClock答案。

如果你正在使用，例如scss，上面的答案将会失败，因为scss试图用特定于scss的rgba()/hsla()函数编译样式，这需要4个参数。然而，rgba()/hsla()也是css的原生函数，所以你可以使用字符串插值来绕过scss函数。

示例(在sass 3.5.0+中有效):

:根{ ——color_rgb: 250, 250, 250; ——color_hsl: 250, 50%， 50%; ｝ div { /*这是有效的CSS，但在scss编译中将失败*/ Background-color: rgba(var(——color_rgb)， 0.5); /*这是有效的scss，将生成*/上面的CSS background - color: # {' rgba (var(——color_rgb), 0.5)的}; ｝ < div > < / div >

请注意，字符串插值对非CSS的scss函数(如lightight())不起作用，因为生成的代码不是函数式CSS。但它仍然是有效的scss，因此编译时不会收到错误。

如果你像我一样喜欢十六进制颜色，还有另一个解决方案。 十六进制值是6位，之后是alpha值。 00是100%透明99是75%然后它用字母“a1-af”然后“b1-bf”以“ff”结尾，这是100%不透明。

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}

我知道OP没有使用预处理器，但如果以下信息是这里答案的一部分，我会得到帮助(我还不能评论，否则我会评论@BoltClock答案。

如果你正在使用，例如scss，上面的答案将会失败，因为scss试图用特定于scss的rgba()/hsla()函数编译样式，这需要4个参数。然而，rgba()/hsla()也是css的原生函数，所以你可以使用字符串插值来绕过scss函数。

示例(在sass 3.5.0+中有效):

:根{ ——color_rgb: 250, 250, 250; ——color_hsl: 250, 50%， 50%; ｝ div { /*这是有效的CSS，但在scss编译中将失败*/ Background-color: rgba(var(——color_rgb)， 0.5); /*这是有效的scss，将生成*/上面的CSS background - color: # {' rgba (var(——color_rgb), 0.5)的}; ｝ < div > < / div >

请注意，字符串插值对非CSS的scss函数(如lightight())不起作用，因为生成的代码不是函数式CSS。但它仍然是有效的scss，因此编译时不会收到错误。

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

你用0到1之间的任何东西替换不透明度

你可以使用线性渐变来改变颜色:

background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)

$(() => { const setOpacity = () => { $('#canvas').css('--opacity', $('#opacity-value').val()) } const setColor = () => { $('#canvas').css('--color', $('#color-value').val()); } $('#opacity-value').on('input', setOpacity); $('#color-value').on('input', setColor); setOpacity(); setColor(); }) #canvas { width: 100px; height: 100px; border: 2px solid #000; --hack: 10000%; background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack))); } #container { background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; padding: 10px; display: inline-block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="canvas"></div> </div> <hr/> <input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" /> <input type="color" id="color-value" />

SCSS / sass

优点:你可以只使用十六进制颜色值，而不是为每个通道(0-255)使用8位。

这是我最初的想法:https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

编辑:你也可以修改alpha函数，只使用#{$color-name}-rgb，省略生成的*-r， *-g， *-b CSS变量。

结果

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

用法:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin和函数

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}