css-recolor

基于SCSS文件的变量定义或JSON配置文件来替换CSS文件中的颜色值。

特性

• 可根据已存在的SCSS文件的变量定义（或其他类似$variable: #rrggbb语法的文件）和JSON配置文件替换颜色
• 可批量替换，支持文件夹整体或多文件传参
• 支持识别简单颜色格式，如$purple: #f0a;，同时也会将CSS中的 #ff00aa 替换为 $purple，反之，如果是变量本身长格式也会查找短格式

注意

• 如果没有指定-s和-c而且同时在默认位置存在SCSS文件和JSON文件，或者同时指定了-s和-c，将只使用SCSS
• SCSS文件中的变量声明应单独占一行。（太懒了，不想多做检测，后续可能会改）
• 如果需要注释掉SCSS中的变量声明，请使用单行注释 // $red: #ff0000;，这样不会输出到CSS文件中，而且替换时也不会替换这个注释的声明的变量 （使用多行注释的时候，这个声明还是会被加入到CSS替换中）

安装

推荐使用 -g 安装：

npm install -g css-recolor

用法

进入相应需要替换的目录，打开命令行，执行recolor并带上选项和需要转换的文件：

recolor -vr -o ./scss2 -n qwd.{name}.scss ./css some.css another.css

通过-s或者默认SCSS文件（./scss/common/_colors.scss）来替换时，直接是根据颜色声明来识别的变量， 同时在替换后的CSS文件中，会加上 @import scss/relative/path 。如果SCSS文件名是以_开头，增加import语句时会自动去掉_。

通过-c或者默认JSON配置文件（./_colors.json）来替换时，key和value分别对应查找的颜色和替换的颜色。 scssImport 值可以用来添加 @import scss/relative/path 这个语句，没有时则不添加。 与使用SCSS不同，如果scssImport属性的文件名有开头的_，不会去除。如果不需要_，在增加scssImport时请不要加_即可。

{
    "scssImport": "path/to/scss/file",
    "#ff0000": "#ee0000",
    "#ff00ff": "$purple"
}

可以通过 -o 参数指定导出的文件夹，默认导出文件夹为 ./scss/ 。

可以通过 -n 参数指定替换后生成的文件名，其中 {name} 表示原有文件名（不含.css后缀）。默认的替换后的文件名为 {name}-converted.scss 。

更多参考，请运行recolor -h。