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

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

9a8f8da31b99e15b7fa2ec2ef71cbdc9.png

下面我们就来看看将嵌套的关联数组转换为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规则字符串。它不包含在

*/

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教程》

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

以上就是如何将嵌套的PHP数组转换为CSS规则?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

article_wechat2021.jpg?1111

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值