第1期 - 辅助工具 之「批量提取替换less颜色 - 多主题」
2020/8/24 8:03:43
本文主要是介绍第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"
这篇关于第1期 - 辅助工具 之「批量提取替换less颜色 - 多主题」的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?