styimat 4.0.0 → 4.2.0

package/README.md

@@ -56,36 +56,26 @@ npm install styimat
 
 ### 5. ESModule使用
 ```javascript
-import styimat from 'https://cdn.jsdelivr.net/npm/styimat/styimat.min.mjs'
+import styimat from 'https://unpkg.com/styimat/esm'
 const css = `
   $primary: lab(54.7 77.9 80.1);
   .button { background-color: $primary; }
 `;
 
-const result = styimat.convent(css);
+const result = styimat.convert(css);
 console.log(result);
 ```
 
-```javascript
-import styimat from 'https://cdn.jsdelivr.net/npm/styimat/styimat.min.mjs'
-const css = `
-  $primary: lab(54.7 77.9 80.1);
-  .button { background-color: $primary; }
-`;
-
-const result = styimat(css);
-console.log(result);
-```
 **也可以按需导入**
 
 ```javascript
-import { convent, apply } from 'https://cdn.jsdelivr.net/npm/styimat/styimat.min.mjs'
+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 = convent(css);
+const result = convert(css);
 console.log(result);
 apply();
 ```
@@ -101,6 +91,7 @@ apply();
 - **轻量高效** - 无依赖，压缩后仅约 20KB
 - **多种使用方式** - 浏览器、Node.js、命令行均可使用
 - **灵活API** - 支持函数调用、模板标签、对象配置等多种用法
+- **现代ESModule导入** - 支持`import`按需导入
 
 ## 快速开始
 
@@ -359,6 +350,37 @@ body {
 <style src="head.css" e></style>
 ```
 
+### 宏语法
+
+#### 您可以在CSS文件使用宏，应该以`@macro开头`：
+
+```css
+@macro grid($columns, $gap: 10px) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+}
+
+.container {
+  @grid(3, 20px);
+}
+```
+
+### 别名语法
+
+#### 您可以在CSS文件的开头使用别名来让css属性名更简单，应该以`@alias开头`：
+
+```css
+@alias bg background-color;
+
+/* 然后写您的CSS代码 */
+$primary-color: lab#32a852;
+
+body {
+  bg: $primary-color;
+}
+```
+
 ### 配置头语法
 
 您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#` 开头：