我将如何将 CSS 变量大规模转换回其原始值？

Question

基本上，假设我有以下代码：

html {
  --pink: #ffe4f1;
  --yellow: #fff7d1;
  --green: #e4f9e0;
  --purple: #f2e6ff;
  --blue: #e2f1ff;
  --gray: #f3f2f1;
  --charcoal: #696969;
}

.pink { color: var(--pink); }
.yellow { color: var(--yellow); }
.green { color: var(--green); }
.purple { color: var(--purple); }
.blue { color: var(--blue); }
.gray { color: var(--gray); }
.charcoal { color: var(--charcoal); }

但我真正想要的是：

.pink { color: #ffe4f1; }
.yellow { color: #fff7d1; }
.green { color: #e4f9e0; }
.purple { color: #f2e6ff; }
.blue { color: #e2f1ff; }
.gray { color: #f3f2f1; }
.charcoal { color: #696969; }

---

那么，如果不手动更改，我将如何更改所有变量（可能不止一次出现）？我知道它基本上是一个 CSS 降级编译器，但是那里有类似的东西吗？如果没有，是否至少有一个项目正在进行中？

另外要提到的是，css 脚本中会有多个变量实例，以及其他情况，例如设置重复变量（一个在 :root 中，另一个在选择器中以在该范围内覆盖） .

想要这样做的原因之一是为旧版浏览器/webviews 提供旧版 CSS 支持。

Answer 1

我会编写一个 shell 脚本来修改 CSS 文件：

#!/bin/bash

css_file=style.css

# I will suppose that each variable definition is alone on one line

for color_code_pair in $(grep '^ *--[a-zA-Z]*:' $css_file |
  sed -e 's/^ *--//' -e 's/; *$//' -e 's/: *//') ;
do
  color=${color_code_pair%#*}       # remove '#' and everything after
  code=${color_code_pair#*#}        # remove '#' and everything before

  # I will suppose the css lines have a similar structure

  # sed command below changes the color name into the hexadecimal code 
  sed -i "s/var(--$color)/#$code/" $css_file

  # sed command below deletes the variable definition 
  sed -i "/^ *--$color:/d" $css_file

done