第1期 - 辅助工具 之「批量提取替换less颜色 - 多主题」

业务背景

项目开发到一定阶段或者改造项目要支持多主题定制，但是存在以下情况：

• less中存在大量color值；
• 从众多模块中提取相同多color到一个变量，比较工作量大，效率低；
• 需要对less中color中相关color样式提取到带前缀的class类空间下；
• 。。。

基于以上涉及color改造需求，封装了插件[@zebrateam/auto-complate-color-variable]。

简介

[PostCSS] plugin color variable. 替换颜色值为预定义的变量。目前支持 Less 和 Sass，支持批量替换多个文件及缺失定义变量检测并自动创建。

安装依赖

全局安装插件:

npm install @zebrateam/auto-complate-color-variable -g

支持特性

定义颜色变量名的文件

@link-color: #0a1;

输入

.foo {
    color: #0a1;
    background: rgb(170, 170, 170);
    border: 1px solid rgba(170, 170, 170, 0.1);
}

输出

.foo {
  color: @link-color;
  background: @link-color;
  border: 1px solid fade(@link-color, 10%);
}

配置变量

.colorvarrc.json支持配置项详解：

参数	描述	类型	默认值
variableFiles	定义颜色变量的文件路径	Array	[]
syntax	语法，支持 less 和 scss	String	‘less’
autoImport	是否自动导入依赖的variableFiles	Boolean	false
alias	等同于 webpack 中的alias	Object	{}
base	基础路径，modules匹配时扫描进入目录	String	‘’
autoComple	是否自动补全缺失color变量，
checkMode为‘1’时有效	Boolean	false
usingAlias	自动导入 variableFile 时，使用 alias ，
例如 @import ‘~@/src/color.less’	String	‘’
singleQuote	自动导入时是否使用单引号， 默认 false	Boolean	false
checkMode	是否为检测模式，为‘1’时，
只检测缺失定义color变量	Boolean	‘0’
cssTplPath	转换color为变量，提取支持多主题模版的路径
（可以根目录相对路径文件）	String	‘./template/less.tpl’
supportCssTpl	是否选择css模版来转换样式	Boolean	false
prettyCss	是否美化代码	Boolean	true

命令行参数

参数	描述	类型	别名	是否必须	例子
syntax	语法: 支持 less 和 scss , 默认less	String	‘s’	false	pcvar ./index.less --syntax less
base	定义基础路径，用来批量转换多个文件	String	‘b’	false	pcvar --base src
modules	定义匹配文件规则	String	‘m’	false	pcvar --modules “**/*.less”
checkMode	检测是否缺失color未定义变量(1: 检测；0: 不检测，检测模式时，不自动写入转换less文件)	String	‘c’	false	pcvar --modules “**/*.less” --checkMode=1

项目应用

项目根目录创建文件.colorvarrc.json：

{
  "variableFiles": ["./config/theme.less"],
  "syntax": "less",
  "autoImport": true,
  "alias": {
    "@": "./config" 
  },
  "base": "src/pages",
  "autoComple": true,
  "usingAlias": "@", 
  "singleQuote": false,
  "supportCssTpl": true
}

命令行

# 检测模式，如果autoComple为true，则变量定义文件自动创建缺失变量
pcvar --m "**/*.less" --c=1

# 批量转换多文件
pcvar --m "**/*.less"