devly/css-generator

使用PHP动态生成CSS

安装: 159

依赖: 0

建议者: 0

安全性: 0

星星: 1

关注者: 1

分支: 0

开放性问题: 0

类型:项目

1.0.0 2024-06-02 21:44 UTC

This package is auto-updated.

Last update: 2024-09-02 22:16:47 UTC


README

使用PHP动态生成CSS。

用法

use Devly\CssGenerator\CSS;
$options = [
    'indent' => 4, // Default indent: 4 spaces
    'minify' => false, // Default false
];
$css = CSS::new([], $options);
$css->charset('utf-8');
$css->import('path/to/imported.css');
$css->import('path/to/second-imported.css')
    ->supports('display: block')
    ->media('screen');
$css->selector('body')
    ->fontFamily('Arial, sans-serif')
    ->fontSize('16px')
    ->lineHeight(1.5);
$css->media('screen and (min-width: 768px)')
    ->selector('body')
    ->fontSize('18px')
    ->endMedia();

echo $css->compile();

输出

@charset "utf-8";
@import "path/to/imported.css";
@import "path/to/second-imported.css" supports(display: block) screen;

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

启用最小化

@charset "utf-8";@import "path/to/imported.css";@import "path/to/second-imported.css" supports(display: block) screen;body{font-family:Arial, sans-serif;font-size:16px;line-height:1.5;}@media screen and (min-width: 768px){body{font-size:18px;}}

保存到文件

而不是输出编译后的CSS,可以将其保存到文件中

$minify = true; // Will override minify option if already set
$override = true; // Override if file exists
$mkdir    = true; // Creates directory recursively if not already exists
$css->save('path/to/compiled.css', $minify, $override, $mkdir);

从CSS类的另一个实例导入规则

use Devly\CssGenerator\CSS;

$imported = CSS::new()->selector('body')->backgroundColor('#000000');

$css = CSS::new($imported)

此外,还可以将CSS导入到media()语句中

use Devly\CssGenerator\CSS;

$mobile_css = CSS::new()->selector('body')->backgroundColor('#000000');

$css = CSS::new()->media('screen and (max-width: 768px)', $mobile_css);