一个高效的CSS变量预处理库,支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域,让现代CSS开发更简洁强大。
让CSS变量拥有预处理能力:嵌套语法、Lab/LCH色彩空间、Display P3广色域、智能数学计算,一份代码适配所有现代浏览器。
```
├── bin
│ └── convert-styimat.js
├── dist
│ ├── styimat.js
│ ├── styimat.min.js
│ ├── styimat.min.mjs
│ └── styimat.mjs
├── esm // ESModule文件的快捷导入方式
├── umd // UMD文件的快捷导入方式
├── cli // 命令行文件的快捷导入方式
└── package.json
bash
克隆主仓库
git clone https://gitee.com/wxy6987/styimat.git进入项目目录
cd styimat安装依赖
npm install
`$3
$3
`bash
npm install styimat
`$3
`html
`$3
`javascript
import styimat from 'https://unpkg.com/styimat/esm'
const css = ;const result = await styimat.convert(css);
console.log(result);
`也可以按需导入
`javascript
import { convert, apply } from 'https://unpkg.com/styimat/esm'
const css = ;const result = convert(css);
console.log(result);
apply();
`特性
- Lab/LCH 颜色支持 - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
- 广色域显示 - 自动检测并支持 Display P3 广色域显示器
- 变量系统 - 类似 Sass 的变量系统,支持作用域变量
- 嵌套规则 - 支持 Sass 风格的嵌套选择器
- 十六进制语法 - 支持
lab#LLAABB 和 lch#LLCCHHH 简洁语法
- 增强数学计算 - 支持 math() 函数和复杂数学表达式
- 轻量高效 - 无依赖,压缩后仅约 20KB
- 多种使用方式 - 浏览器、Node.js、命令行均可使用
- 灵活API - 支持函数调用、模板标签、对象配置等多种用法
- 现代ESModule导入 - 支持import按需导入---
使用方法
$3
#### 1. 作为函数调用
`javascript
// 方式1:直接传入CSS字符串
const css = await styimat();// 方式2:传入配置对象(返回函数本身)
styimat({
enableP3: true,
enableMath: true
});
// 方式3:无参数调用(自动处理页面中所有标记的