• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

如何将嵌套的PHP数组转换为CSS规则?(代码示例)

php 搞代码 3年前 (2022-01-21) 18次浏览 已收录 0个评论

应用程序的许多方面都可以自动化,例我们可以使用某些PHP代码(如使用数组)来生成样式表。那么如何实现?下面本篇文章就来带大家了解一下如何将嵌套的PHP数组转换为CSS规则,并以字符串的形式显示,希望对大家有所帮助。

下面我们就来看看将嵌套的关联数组转换为CSS字符的方法。

1、编写关联数组转换为css字符串的函数

要在PHP中将数组转换为CSS字符串(在SASS或LESS的情况下使用规则或简单变量),我们将使用以下函数:

<?php/** * @param array $rules *   CSS规则的数组形式为: *   array('selector'=>array('property' => 'value')).  *   还支持选择器 *   嵌套示例: *   array('selector' => array('selector'=>array('property' => 'value'))). * * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。 */function css_array_to_css($rules, $indent = 0) {    $css = '';    $prefix = str_repeat('  ', $indent);    foreach ($rules as $key => $value) {        if (is_array($value)) {            $selector = $key;            $properties = $value;            $css .= $prefix . "$selector {\n";   <span>!本文来源gaodai#ma#com搞*!代#%^码网5</span><pre>搞gaodaima代码

$css .= $prefix . css_array_to_css($properties, $indent + 1); $css .= $prefix . "}\n"; } else { $property = $key; $css .= $prefix . "$property: $value;\n"; } } return $css;}//调用css_array_to_css()函数转换//code?>

说明:该函数基本上期望作为第一个参数包含CSS的规则或简单属性的数组,其中不是数组的每个key =>value;都将表示为key : value;,如果键的值是数组,则规则为css将被引入。

2、使用函数

正如上述函数说明中所提到的,它从具有指定规则的数组中返回一个CSS字符串。只要数组的结构有效,该函数就可以正常用于纯CSS规则,媒体查询,SASS和LESS。例如:

● 转换为CSS:

在 css_array_to_css()函数后添加以下代码:

$stylesheet = array(    "body" => array(        "margin" => "0",        "font-size" => "1rem",        "font-weight" => 400,        "line-height" => 1.5,        "color" => "#212529",        "text-align" => "left",        "background-color" => "#fff"    ),    ".form-control" => array(        "display" => "block",        "width" => "100%!important",        "font-size" => "1em",        "background-color" => "#fff",        "border-radius" => ".25rem"    ));echo(css_array_to_css($stylesheet));

上一个代码段将输出以下CSS规则:

body {  margin: 0;  font-size: 1rem;  font-weight: 400;  line-height: 1.5;  color: #212529;  text-align: left;  background-color: #fff;}.form-control {  display: block;  width: 100%!important;  font-size: 1em;  background-color: #fff;  border-radius: .25rem;}

● 转换为SASS / SCSS:

由于递归实现,将能够在规则中嵌套多个规则,这允许我们为SASS生成有效的语法:

$sass = array(    "nav" => array(        "ul" => array(            "margin" => 0,            "padding" => 0,            "list-style" => "none"        ),        "li" => array(            "display" => "inline-block"        ),        "a" => array(            "display" => "block",            "padding" => "6px 12px",            "text-decoration" => "none"        )    ));echo css_array_to_css($sass);

搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何将嵌套的PHP数组转换为CSS规则?(代码示例)

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址