Как я могу заставить цветовые украшения для ссылок на переменные CSS работать в VS Code?
Я работаю над пользовательскими свойствами CSS и их модификацией. Кажется, что лучший способ добавить/изменить альфа-канал для цветов — это использовать нотацию hsl:
:root {
--green: 120deg, 100%, 50%;
}
.box {
background: hsl(var(--green), 0.5);
}
Проблема с этим подходом заключается в том, что VS Code не распознает hsl(var(--green)) как цвет:
Как я могу получить значения свойств цвета, используя ссылки на переменные CSS, чтобы иметь цветовые украшения в VS Code? Будет ли такая вещь вообще реально осуществимой?
расширение "Цветная подсветка" от Сергея Наумова поддерживает эту функцию
нет, «Выделение цветом» не поддерживает этот случай.
Я удалил явный запрос рекомендаций по расширению. см. № 3 из /help/on-topic. @ рецензенты в очереди на закрытое голосование, обратите внимание.
Ответы 1
Как я могу получить значения свойств цвета, используя ссылки на переменные CSS, чтобы иметь цветовые украшения в VS Code? Будет ли такая вещь вообще реально осуществимой?
Я не думаю, что такая вещь вообще реально осуществима, потому что то, о чем мы здесь говорим, является функцией, основанной на статическом анализе, а пользовательские свойства CSS (переменные) в значительной степени являются функцией времени выполнения (динамической).
Рассмотрим только следующее:
<style>.proof { background-color: var(--my-var) }</style>
<!-- okay, so what decoration do you think should show above? -->
<div style = "--my-var: #ff00ff;" class = "proof">hello</div>
<div style = "--my-var: #ffff00;" class = "proof">hello</div>
<div style = "--my-var: #00ffff;" class = "proof">hello</div>Это очень простое доказательство того, что ссылки на переменные оцениваются во время выполнения. И может быть несколько разных значений, оцененных из каскада во время выполнения (и статический анализ покажет...?). Можно сделать еще несколько пунктов:
<style>.proof { background-color: var(--my-var) }</style>
<!-- okay, so what decoration do you think should show above? -->
<div style = "--my-var: #ff00ff;"><div class = "proof">hello</div></div>
<div style = "--my-var: #ffff00;"><div class = "proof">hello</div></div>
<div style = "--my-var: #00ffff;"><div class = "proof">hello</div></div>Эта простая модификация показывает, что оценка зависит от каскада.
Итак, оцениваемое значение из ссылки на переменную зависит от каскада, оценивается во время выполнения (оно также отслеживается во время выполнения для перерасчета стиля и перерисовки). VS Code или любой статический анализ ничего не могут вам показать.
Фактически, после того, как я закончил писать этот пост, я погуглил «github vscode issues color decorations css variable» и нашел [css] декораторы цвета для пользовательских свойств/переменных CSS #173923 , где один из сопровождающих VS Code, по сути, говорит то же самое ( ссылка).
встроенный декоратор цвета представляет собой простой поиск по регулярному выражению, если вам нужна оценка выражения, вам нужно написать свой собственный поставщик декоратора, тогда вы также можете поддерживать
calc