Styimat


让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
`

安装方式

$3


`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 =
$primary: lab(54.7 77.9 80.1);
.button { background-color: $primary; }
;

const result = await styimat.convert(css);
console.log(result);
`

也可以按需导入

`javascript
import { convert, apply } from 'https://unpkg.com/styimat/esm'
const css =
$primary: lab(54.7 77.9 80.1);
.button { background-color: $primary; }
;

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(
$primary: lab(54.7 77.9 80.1);
.button { color: $primary; }
);

// 方式2：传入配置对象（返回函数本身）
styimat({
enableP3: true,
enableMath: true
});

// 方式3：无参数调用（自动处理页面中所有标记的