私はElectronでアプリを設計しているので、CSS変数にアクセスできます。で色変数を定義しましたvars.css：

:root {
  --color: #f0f0f0;
}

この色をで使用したいのですmain.cssが、不透明度が適用されています。

#element {
  background: (somehow use var(--color) at some opacity);
}

これを行うにはどうすればよいですか？プリプロセッサは使用せず、CSSのみを使用しています。私はすべてCSSの答えを望みますが、JavaScript / jQueryを受け入れます。

opacity透明にしてはいけない背景画像を使っているので使えません。

既存のカラー値を取得してアルファチャネルを適用することはできません。つまり、などの既存の16進数値を取得#f0f0f0してアルファコンポーネントに割り当て、その結果の値を別のプロパティで使用することはできません。

しかし、カスタムプロパティを使用すると、RGBので使用するためのトリプレットにあなた進値を変換できるようにするrgba()値が使用していることを、カスタムプロパティの値が（カンマを含む！）という店、代理var()にrgba()ご希望のアルファ値を持つ関数、およびそれがよちょうど働く：

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

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

<p id="element">If you can see this, your browser supports custom properties.</p>

これはほとんど真実ではないようです。¹どのように機能しますか？

マジックは、プロパティの値が計算される前に、プロパティ値の参照を置き換えるときにカスタムプロパティの値がそのまま置き換えられるという事実にあります。これは、カスタムプロパティに関する限り、例のの値は、式が色の値を期待する場所に現れるまで（およびそのコンテキストでのみ）、色の値ではないことを意味します。css-variables仕様のセクション2.1から：var()--colorvar(--color)

カスタムプロパティに許可される構文は、非常に寛容です。<declaration-value>プロダクションは、シーケンスに<bad-string-token>、<bad-url-token>、unmatched <）-token>、<]-が含まれていない限り、1つ以上のトークンのシーケンスと一致します。 token>、<}-token>、またはトップレベルの<semicolon-token>トークンまたは<delim-token>トークン。値は "！"です。

たとえば、以下は有効なカスタムプロパティです。

--foo: if(x > 5) this.width = 10;

この値は変数としては無意味ですが、通常のプロパティでは無効であるため、JavaScriptによって読み取られて操作される可能性があります。

そしてセクション3：

プロパティに1つ以上のvar（）関数が含まれていて、それらの関数が構文的に有効である場合、プロパティの文法全体が解析時に有効であると想定する必要があります。var（）関数が置き換えられた後、計算された値の時点でのみ構文チェックされます。

つまり、上記の240, 240, 240値は、宣言が計算される前にrgba()関数に直接代入されます。したがって、この：

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

rgba()4つ以上のカンマ区切りの数値が必要であるため、最初は有効なCSSではないように見えますが、次のようになります。

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

もちろん、これは完全に有効なCSSです。

さらに一歩進んで、独自のカスタムプロパティにアルファコンポーネントを格納できます。

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

そして、それを同じ結果で置き換えます：

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

これにより、オンザフライで交換できるさまざまなアルファ値を持つことができます。

¹ _{そうですね、それは、カスタムプロパティをサポートしていないブラウザーでコードスニペットを実行している場合です。}

OPがプリプロセッサを使用していないことはわかっていますが、次の情報がここでの回答の一部である場合は助けられました（まだコメントできません。それ以外の場合は、@ BoltClockの回答にコメントします。

たとえばscssを使用している場合、scssは4つのパラメーターを必要とするscss固有のrgba（）/ hsla（）関数を使用してスタイルをコンパイルしようとするため、上記の答えは失敗します。ただし、rgba（）/ hsla（）もネイティブのcss関数なので、文字列補間を使用してscss関数をバイパスできます。

例（sass 3.5.0以降で有効）：

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

文字列補間は、CSS以外のscss関数では機能しないことに注意してください。 lighten()結果のコードは機能するCSSではないため機能しません。ただし、それでも有効なscssであるため、コンパイル時にエラーは発生しません。

私は同様の状況にありましたが、残念ながら、変数はrgbto からto hslまで、hexまたはカラー名でさえある可能性があるため、指定されたソリューションはうまくいきませんでした。
とを疑似または要素に適用することで、この問題を解決background-colorしopacityました：:after:before

.container {
    position: relative;
}

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

背景を適用する要素によっては、スタイルを少し変更する必要がある場合があります。
また、すべての状況で機能するとは限りませんが、他のソリューションを使用できない場合に役立つことを期待しています。

編集： 先ほど気づきましたが、このソリューションはターゲット要素の前に要素を作成し、それに透明な背景色を適用するため、テキストの色にも明らかに影響します。
これが問題になる場合があります。

これは確かにCSSで可能です。少し汚れているので、グラデーションを使用する必要があります。例として小さなスニペットをコーディングしました。暗い背景の場合、明るい白の場合と同様に、黒の不透明度を使用する必要があることに注意してください。

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

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

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

不透明度を0から1の間の値に置き換えます

SCSS / SASS

利点：すべてのチャネル（0〜255）に8ビットを使用する代わりに、16進数のカラー値を使用できます。

これは私が最初のアイデアでそれをした方法です：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 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);
}

うまくいけば、これは誰かの時間を節約するでしょう。

各色に特定の変数/値を設定できます-元の色と不透明度のある色：

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

これを使用できず、JavaScriptソリューションに問題がない場合は、これを使用できます。

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

一般的なcss変数でrgba（）を使用するには、これを試してください：

1. ：root内で色を宣言しますが、他の回答のようにrgb（）を使用しないでください。値を書くだけ

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

2. 他の答えとしてvar（）を使用して--color変数を使用する

#some-element {
  color : rgba(var(--color),0.5);
}

CSSでは、rgba値を使用できる必要があります。

#element {
  background: rgba(240, 240, 240, 0.5);
}

または単に不透明度を設定します：

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

私のような16進数の色が好きなら、別の解決策があります。16進値は6桁で、その後はアルファ値です。00は100％の透明度99は約75％で、アルファベット「a1-af」、次に「b1-bf」が使用され、100％不透明な「ff」で終わります。

:root {
--color: #F00;
}

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