README

使用PHP编写CSS程序。

安装

composer require luizbills/css-generator

用法

创建生成器

require_once 'vendor/autoload.php';

use luizbills\CSS_Generator\Generator as CSS_Generator;

$options = [
    // default values
    // 'indent_style' => 'space', // you can change to 'tab'
    // 'indent_size' => 4 // 4 spaces by default
];

$css = new CSS_Generator( $options );

// define your css code (see below)

// output the generated code
echo "<style>" . $css->get_output() . "</style>";

添加规则

$css->add_rule( 'a', [ 'color' => 'red' ] );

$css->add_rule(
    [ 'p', 'div' ],
    [
        'margin' => '13px',
        'padding' => '9px'
    ]
);

输出

a {
    color: red;
}
p,
div {
    margin: 13px;
    padding: 9px;
}

添加全局变量

$css->root_variable( 'color1', 'red' );
$css->add_rule( 'a', [ 'color' => 'var(--color3)' ] );
$css->root_variable( 'color2', 'green' );
$css->root_variable( 'color3', 'blue' );

输出

:root {
    --color1: red;
    --color2: green;
    --color3: blue;
}

a {
    color: var(--color3);
}

注意：所有由 root_variable 声明的变量都将放置在开头。

添加注释

$css->add_comment( 'Lorem ipsum...' )

输出

/* Lorem ipsum... */

打开和关闭块

$css->open_block( 'media', 'screen and (min-width: 30em)' );
$css->add_rule( 'a', [ 'color' => 'red' ] );
$css->close_block(); // close the last opened block

输出

@media screen and (min-width: 30em) {
    a {
        color: red;
    }
}

转义选择器

有时你需要转义你的选择器。

<!-- Examples -->
<div id='@'></div>
<div class='3dots'></div>
<div class='red:hover'></div>

$css->add_rule( '#' . $css->esc( '@' ), [
    'animation' => 'shake 1s'
] );
$css->add_rule( '.' . $css->esc( '3dots' ) . '::after', [
    'content' => '"..."'
] );
$css->add_rule( '.' . $css->esc( 'red:hover' ) . ':hover', [
    'color' => 'red'
] );

输出

#\@ {
    animation: shake 1s;
}
.\33 dots::after {
    content: "...";
}
.red\:hover:hover {
    color: red;
}

包含任何内容（请注意）

$css->add_raw( 'a{color:red}' );

输出

a{color:red}

压缩CSS

echo $css->get_output( true ); // returns the compressed code
echo $css->get_output( false ); // returns the pretty code

许可

MIT许可证 © 2022 Luiz Bills