我試圖使用CSS變量動態設置HSLA背景顏色的不透明度。 首先我為顏色創建了一個變量- color，它包含了- alpha變量作為alpha。它可以工作，但是我不能在元素級別覆蓋- alpha變量。h1標記上的- alpha: .5應用于元素，但我看不到元素的透明度。

https://svelte.dev/repl/d4e15ba129324149915c2e124eeecb76?版本=3.59.1

<script>
    let name = 'world';
</script>

<h1 style="--alpha: .5">Hello {name}!</h1>

<style>
    :global(:root) {
        --alpha: 1;
        --color: hsla(225, 50%, 50%, var(--alpha));
    }
    h1 {
        background-color: var(--color);
    }
</style>

因為該變量是在樹中較高的不同元素上定義的，所以對- alpha的更改不會影響- color，因為它是在不同的級別用不同的- alpha值解析的。

一種解決方法是在組件中的所有元素上定義變量(如果可以避免的話，不建議使用:global，但是如果另一個組件中的一些子元素依賴于它，這可能是必要的)。

* { 
  --alpha: 1;
  --color: hsla(225, 50%, 50%, var(--alpha));
}

對于限定了作用域的樣式，選擇器被轉換成一個類選擇器。但是對于全局風格來說，如果它對性能有負面影響，那么最好避免這種方法。

一個更優化的方法是，如果你需要的話:global將只把顏色聲明移動到一個特殊的類中，這個類需要應用到引用- color的元素上(在這個例子中是h1或任何子組件):

:global(.custom-color) {
  --color: hsla(225, 50%, 50%, var(--alpha));
}

如果您提取所有其他顏色成分(色調、飽和度、亮度)并一起刪除顏色，您可以避免這種情況，盡管您也將總是不得不到處拼寫一個冗長的hsla定義。

我不確定對你來說什么是最好的方法，因為我不知道你想做什么，但一個解決方案是使用Javascript設置CSS變量:

<script>
    let alpha = 0.5;
    let root = document.querySelector(":root")
    $: root.style.setProperty('--alpha', alpha);
</script>

現在，無論何時更改alpha值，root.style.setProperty(' - alpha '，alpha)；會重新實現我認為你想要的。