@@ -9,44 +9,44 @@ Used in conjunction with the plugin [postcss-each], [postcss-conditionals], [pos
9
9
``` css
10
10
/* input.css */
11
11
:root {
12
- --array : foo, bar, baz;
13
- --from : 1 ;
14
- --to : 3 ;
15
- --icon-exclude : 2 ;
16
- --color-danger : red ;
12
+ --array : foo, bar, baz;
13
+ --from : 1 ;
14
+ --to : 3 ;
15
+ --icon-exclude : 2 ;
16
+ --color-danger : red ;
17
17
}
18
18
19
19
@each $val in var(--array) {
20
- @import " $val.css" ;
20
+ @import " $val.css" ;
21
21
}
22
22
```
23
23
24
24
``` css
25
25
/* foo.css */
26
26
html {
27
- background-color : var (--color-danger );
27
+ background-color : var (--color-danger );
28
28
}
29
29
```
30
30
31
31
``` css
32
32
/* bar.css */
33
33
.some-class {
34
- color : #fff ;
35
-
36
- @for $val from var (--from ) to var (--to ) {
37
- @if $val != var (--icon-exclude ) {
38
- .icon- $val {
39
- background-position : 0 $(val)px ;
40
- }
41
- }
42
- }
34
+ color : #fff ;
35
+
36
+ @for $val from var (--from ) to var (--to ) {
37
+ @if $val != var (--icon-exclude ) {
38
+ .icon- $val {
39
+ background-position : 0 $(val)px ;
40
+ }
41
+ }
42
+ }
43
43
}
44
44
```
45
45
46
46
``` css
47
47
/* baz.css */
48
48
h1 {
49
- font-size : 24px ;
49
+ font-size : 24px ;
50
50
}
51
51
52
52
@import " biz.css" ;
55
55
``` css
56
56
/* biz.css */
57
57
h2 {
58
- color : olive ;
58
+ color : olive ;
59
59
}
60
60
```
61
61
62
62
``` css
63
63
/* Output example */
64
64
html {
65
- background-color : red ;
65
+ background-color : red ;
66
66
}
67
67
.some-class {
68
- color : #fff ;
69
- .icon- 1 {
70
- background-position : 0 1px ;
71
- }
72
- .icon-3 {
73
- background-position : 0 3px ;
74
- }
68
+ color : #fff ;
69
+ .icon- 1 {
70
+ background-position : 0 1px ;
71
+ }
72
+ .icon-3 {
73
+ background-position : 0 3px ;
74
+ }
75
75
}
76
76
h1 {
77
- font-size : 24px ;
77
+ font-size : 24px ;
78
78
}
79
79
h2 {
80
- color : olive ;
80
+ color : olive ;
81
81
}
82
82
83
83
```
@@ -111,10 +111,10 @@ var output = postcss()
111
111
.use (atVariables ({ /* options */ }))
112
112
.use (atEach ())
113
113
.use (atImport ({
114
- plugins: [
115
- require (" postcss-at-rules-variables" ).default ({ /* options */ }),
116
- require (" postcss-import" )
117
- ]
114
+ plugins: [
115
+ require (" postcss-at-rules-variables" ).default ({ /* options */ }),
116
+ require (" postcss-import" )
117
+ ]
118
118
}))
119
119
.use (atFor ())
120
120
.use (atIf ())
@@ -136,6 +136,6 @@ Default: `['for', 'if', 'else', 'each']`
136
136
137
137
See [ PostCSS] ( https://github.com/postcss/postcss ) docs for examples for your environment.
138
138
139
- [ postcss-conditionals ] : https://github.com/andyjansson/postcss-conditionals
140
- [ postcss-each ] : https://github.com/outpunk/postcss-each
141
- [ postcss-for ] : https://github.com/antyakushev/postcss-for
139
+ [ postcss-conditionals ] : https://github.com/andyjansson/postcss-conditionals
140
+ [ postcss-each ] : https://github.com/outpunk/postcss-each
141
+ [ postcss-for ] : https://github.com/antyakushev/postcss-for
0 commit comments