从CSS识别颜色属性并组合选择器？

Question

我正在寻找一种工具，可以帮助我识别CSS颜色属性（颜色，背景颜色，边框颜色等）并组合选择器，而不是反复重复颜色属性。

所以像这样的代码：

body {color: #656565;}        
a {color: #c0c0c0;}        
h1 {color: #000;}

.norm-element {color: #656565;}    
.accent-element {color: #c0c0c0;}

会结束：

body, .norm-element {
    color: #656565;
}

a, .accent-element {
    color: #c0c0c0;
}

h1 { color: #000; }

Answer 1

你可以使用css变量。资源here和浏览器支持这是非常好的here。所以从你的例子

body {color: #656565;}        
a {color: #c0c0c0;}        
h1 {color: #000;}
.norm-element {color: #656565;}    
.accent-element {color: #c0c0c0;}

变

  :root {
    --main-bg-color: #656565;
  }
  body, .norm-element {
    color: var(main-bg-color);
   }