README

html-armor的CSS扩展

辅助工具

• css (array $selectores_propiedades)
• style($content = null,array $atributos = [])
• sye(array $propiedades,string $selector = "",int $serie = 0,$jump = false)

目前sye函数用于创建属性、选择器以及导入字体。

它还具备一些特殊功能，允许你创建选择器系列和相同的模式。

你可以使用style()函数，但建议使用css()函数直接在标签head中添加CSS样式，或者使用在html-tags包中实现的lnk()函数添加外部CSS文件。

使用示例

导入字体

css([
    sye([
        'import' => "https://fonts.googleapis.ac.cn/css2?family=Lato&display=swap"
    ])
]);

导入字体并添加第一个选择器

css([
    sye([
        'import' => "https://fonts.googleapis.ac.cn/css2?family=Lato&display=swap"
    ]),
    sye([
        'display' => 'grid',
        'grid-template-columns' => 'repeat(3, 1fr)',
        'grid-gap' => '5px',
        'font-family' => '"Lato", sans-serif',
        'width' => '550px'
    ],".wrapper")
]);

具有相同样式的选择器系列

例如，你想创建如下内容
.class, .class1, class2 { propertie1,properti2,propertie3}

那么你可以这样使用sye函数

sye([
    'width' => '60px',
    'height' => '60px',
    'text-align' => 'center',
    'padding-top' => '10px',
    'box-sizing' => 'border-box'
],".element",10)

具有相同属性但不同值的选择器系列

例如，你想创建如下内容
.class1{ propertie:value1}
.class2{ propertie:value2}
.class3{ propertie:value3}

那么你可以这样使用sye函数

sye([
    'background',
    'papayawhip',
    'papayawhip',
    'papayawhip',
    'pink',
    'pink',
    'pink',
    'lightcyan',
    'lightcyan',
    'lightcyan'
],".element",10,true)

媒体查询

对于媒体查询，我们有media()函数，该函数接受一个数组作为参数。

请注意，此函数只能创建三个不同的断点。480px、768px和1024px。

也可以为选择器创建样式，但格式相对于属性和值更为手动。

使用示例

假设我们想要创建一个480px的断点并添加选择器和CSS属性。

media([
    '480' => [
        '.brand' => 'background: #cbb09c !important;'
    ]
]);

上述代码将创建媒体查询，并在其内部创建应用于宽度不超过480px的屏幕的样式。也可以同时添加多个断点。

media([
    '480' => [
        '.brand' => 'background: #cbb09c !important;'
    ],
    '780' => [
        '.brand-text' => 'color: #cbb09c !important;'
    ],
    '1024' => [
        'form' => [
            "max-width: 460px;",
            "margin: 20px auto;",
            "padding: 20px;"
        ]
    ]
]);

最后，如果我们只想为选择器创建样式，只需不将断点添加到数组中，直接传递选择器和属性即可。

media([
    ".brand" => [
                "background: #cbb09c !important;"
    ],
    ".brand-text" => [
        "color: #cbb09c !important;"
    ],
    "form" => [
        "max-width: 460px;",
        "margin: 20px auto;",
        "padding: 20px;"
    ]
]);