styimat 4.1.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -3
- package/dist/styimat.js +367 -384
- package/dist/styimat.min.js +23 -20
- package/dist/styimat.min.mjs +23 -20
- package/dist/styimat.mjs +368 -385
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,20 +62,20 @@ const css = `
|
|
|
62
62
|
.button { background-color: $primary; }
|
|
63
63
|
`;
|
|
64
64
|
|
|
65
|
-
const result = styimat.
|
|
65
|
+
const result = styimat.convert(css);
|
|
66
66
|
console.log(result);
|
|
67
67
|
```
|
|
68
68
|
|
|
69
69
|
**也可以按需导入**
|
|
70
70
|
|
|
71
71
|
```javascript
|
|
72
|
-
import {
|
|
72
|
+
import { convert, apply } from 'https://unpkg.com/styimat/esm'
|
|
73
73
|
const css = `
|
|
74
74
|
$primary: lab(54.7 77.9 80.1);
|
|
75
75
|
.button { background-color: $primary; }
|
|
76
76
|
`;
|
|
77
77
|
|
|
78
|
-
const result =
|
|
78
|
+
const result = convert(css);
|
|
79
79
|
console.log(result);
|
|
80
80
|
apply();
|
|
81
81
|
```
|
|
@@ -350,6 +350,22 @@ body {
|
|
|
350
350
|
<style src="head.css" e></style>
|
|
351
351
|
```
|
|
352
352
|
|
|
353
|
+
### 宏语法
|
|
354
|
+
|
|
355
|
+
#### 您可以在CSS文件使用宏，应该以`@macro开头`：
|
|
356
|
+
|
|
357
|
+
```css
|
|
358
|
+
@macro grid($columns, $gap: 10px) {
|
|
359
|
+
display: grid;
|
|
360
|
+
grid-template-columns: repeat($columns, 1fr);
|
|
361
|
+
gap: $gap;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.container {
|
|
365
|
+
@grid(3, 20px);
|
|
366
|
+
}
|
|
367
|
+
```
|
|
368
|
+
|
|
353
369
|
### 别名语法
|
|
354
370
|
|
|
355
371
|
#### 您可以在CSS文件的开头使用别名来让css属性名更简单，应该以`@alias开头`：
|