这篇文章主要介绍将嵌套PHP数组转换为CSS规则的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
应用程序的许多方面都可以自动化,例我们可以使用某些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";
$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);
上一个代码段将输出以下SASS代码:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
● 转换为LESS:
与SASS的工作方式相同,我们也可以使用LESS编写复杂的规则:
$less = array(
"@nice-blue" => "#5B83AD",
"@light-blue" => "@nice-blue + #111",
"#header" => array(
"color" => "@light-blue"
),
".component" => array(
"width" => "300px",
"@media (min-width: 768px)" => array(
"width" => "600px",
"@media (min-resolution: 192dpi)" => array(
"background-image" => "url(/img/retina2x.png)"
)
),
"@media (min-width: 1280px)" => array(
"width" => "800px"
)
)
);
echo css_array_to_css($less);
上一个代码段将输出以下LESS代码:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
以上是将嵌套PHP数组转换为CSS规则的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。