1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
# CSS Generator
Write CSS programatically using PHP.
## Install
```php
composer require luizbills/css-generator
```
## Usage
```php
use luizbills\CSS_Generator\Generator as CSS_Generator;
$options = [
// default values
// 'indentation' => ' ', // 4 spaces
];
$css = new CSS_Generator( $options );
// single selector
$css->add_rule( '.color-white', [ 'color' => '#fff' ] );
$css->open_block( 'media', 'screen and (min-width: 30em)' );
// multiple selectors
$css->add_rule( [ 'html', 'body' ], [
'background-color' => 'black',
'color' => 'white'
] );
$css->close_block(); // close a block
$css->open_block( 'supports', '(display: grid)' );
$css->add_rule( '.grid', [
'display' => 'grid',
] );
// nested block
$css->open_block( 'media', 'screen and (max-width: 30em)' );
$css->add_rule( '.grid-sm', [
'display' => 'grid',
] );
$css->close_blocks(); // close all blocks
$minify = false;
echo $css->get_output( $minify );
```
output:
```css
.color-white {
color: #fff;
}
@media screen and (min-width: 30em) {
html,
body {
background-color: black;
color: white;
}
}
@supports (display: grid) {
.grid {
display: grid;
}
@media screen and (max-width: 30em) {
.grid-sm {
display: grid;
}
}
}
```
Changing `$minify` to `true` will outputs:
```css
.color-white{color:#fff}@media screen and (min-width:30em){body,html{background-color:#000;color:#fff}}@supports (display:grid){.grid{display:grid}@media screen and (max-width:30em){.grid-sm{display:grid}}}
```
There is also a method `add_raw` that adds any string to your css. Useful to comments or include a framework.
```php
$css = new CSS_Generator();
$css->add_rule( '.color-white', [ 'color' => '#fff' ] );
$css->add_raw('/* my comment */ a { text-decoration: none }');
echo $css->get_output();
```
output:
```css
.color-white{
color:#fff;
}
/* my comment */ a { text-decoration: none }
```
## License
MIT License © 2018 Luiz Bills
|
