选择器作用域内覆盖CSS变量无法更新渐变角度问题排查

你忽略了CSS自定义属性（变量）的求值时机——变量里的var()引用是在定义该变量的元素上下文里解析的，而非使用它的元素上下文。

具体来说，你在:root中定义--gr-primary-fade-x时，里面的var(--gr-deg-x)会直接替换为:root里的270deg，所以这个变量的实际值已经固定为linear-gradient(270deg, #1999CC 0%, rgba(0,0,0,0) 50%)。即便你在.myselector中重写了--gr-deg-x，--gr-primary-fade-x还是继承自:root的已计算值，不会更新角度。

解决方法1：在目标元素中重新定义渐变变量 #

直接在.myselector里重新生成--gr-primary-fade-x，让它使用当前元素的--gr-deg-x：

:root {
    --color-primary: #1999CC;
    --gr-deg-x: 270deg;
    --gr-primary-fade-x: linear-gradient(var(--gr-deg-x), var(--color-primary) 0%, rgba(0, 0, 0, 0) 50%);
}

.myselector {
    --gr-deg-x: 180deg;
    /* 重新定义渐变变量，此时会读取当前元素的--gr-deg-x */
    --gr-primary-fade-x: linear-gradient(var(--gr-deg-x), var(--color-primary) 0%, rgba(0, 0, 0, 0) 50%);
    background: var(--gr-primary-fade-x);
    height: 100px;
    width: 100%;
}

解决方法2：拆分渐变组成变量（更优雅） #

将渐变的各个部分拆为独立变量，在使用时再组合，确保动态读取当前元素的角度：

:root {
    --color-primary: #1999CC;
    --gr-deg-x: 270deg;
    --gr-fade-start: var(--color-primary) 0%;
    --gr-fade-end: rgba(0, 0, 0, 0) 50%;
}

.myselector {
    --gr-deg-x: 180deg;
    /* 组合变量时，会使用当前元素的--gr-deg-x */
    background: linear-gradient(var(--gr-deg-x), var(--gr-fade-start), var(--gr-fade-end));
    height: 100px;
    width: 100%;
}

内容的提问来源于stack exchange，提问作者Alex