首页 > 开发 > CSS > 正文

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

2020-03-22 18:35:56
字体:
来源:转载
供稿:网友
html' target='_blank'>应用程序的许多方面都可以自动化,例我们可以使用某些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; 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教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表