如何使VS Code中的CSS变量引用的颜色装饰工作?

huangapple go评论71阅读模式
英文:

How can I get color decorations for CSS variable references to work in VS Code?

问题

I'm working on CSS custom properties and their modification. It seems that the best way to add/change the alpha channel to colors is to use hsl notation:

:root {
  --green: 120deg, 100%, 50%;
}

.box {
  background: hsl(var(--green), 0.5);
}

The problem with this approach is that VS Code doesn't recognize hsl(var(--green)) as color.

How can I get color property values using CSS variable references to have color decorations in VS Code? Would such a thing even be realistically feasible in general?

英文:

I'm working on CSS custom properties and their modification. It seems that the best way to add/change the alpha channel to colors is to use hsl notation:

:root {
  --green: 120deg, 100%, 50%;
}

.box {
  background: hsl(var(--green), 0.5);
}

The problem with this approach is that VS Code doesn't recognize hsl(var(--green)) as color:

如何使VS Code中的CSS变量引用的颜色装饰工作?

How can I get color property values using CSS variable references to have color decorations in VS Code? Would such a thing even be realistically feasible in general?

答案1

得分: 2

I don't think such a thing is realistically feasible in general because what we're talking about here is a feature based on static analysis, and CSS custom properties (variables) are very much a runtime (dynamic) feature.

这在一般情况下实际上是不切实际的,因为我们在讨论的是基于静态分析的功能,而CSS自定义属性(变量)在很大程度上是运行时(动态)功能。

英文:

> How can I get color property values using CSS variable references to have color decorations in VS Code? Would such a thing even be realistically feasible in general?

I don't think such a thing is realistically feasible in general because what we're talking about here is a feature based on static analysis, and CSS custom properties (variables) are very much a runtime (dynamic) feature.

Consider just the following:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;style&gt;.proof { background-color: var(--my-var) }&lt;/style&gt;
&lt;!-- okay, so what decoration do you think should show above? --&gt;
&lt;div style=&quot;--my-var: #ff00ff;&quot; class=&quot;proof&quot;&gt;hello&lt;/div&gt;
&lt;div style=&quot;--my-var: #ffff00;&quot; class=&quot;proof&quot;&gt;hello&lt;/div&gt;
&lt;div style=&quot;--my-var: #00ffff;&quot; class=&quot;proof&quot;&gt;hello&lt;/div&gt;

<!-- end snippet -->

That's a very simple proof that variable references are evaluated at runtime. And there can be multiple different values evaluated from the cascade at runtime (and static analysis would show...?). Even further points can be made:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;style&gt;.proof { background-color: var(--my-var) }&lt;/style&gt;
&lt;!-- okay, so what decoration do you think should show above? --&gt;
&lt;div style=&quot;--my-var: #ff00ff;&quot;&gt;&lt;div class=&quot;proof&quot;&gt;hello&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;--my-var: #ffff00;&quot;&gt;&lt;div class=&quot;proof&quot;&gt;hello&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;--my-var: #00ffff;&quot;&gt;&lt;div class=&quot;proof&quot;&gt;hello&lt;/div&gt;&lt;/div&gt;

<!-- end snippet -->

That simple modification shows that the evaluation depends on the cascade.

Okay, so the evaluated value from the variable reference depends on the cascade, is evaluated at runtime (it's also tracked at runtime for style-recalculations and repaints). VS Code- or any static analysis- can't reasonably show you anything.

In fact, after I initially finished writing this post, I googled "github vscode issues color decorations css variable", and found [css] color decorators for CSS Custom Properties / Variables #173923 where one of the VS Code maintainers essentially says the same thing (link).

huangapple
  • 本文由 发表于 2023年5月7日 19:13:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76193567.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定