如何将嵌套的PHP数组转换为CSS规则？（代码示例）

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

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

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

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

1. <?php 
2.  
3. /** 
4.  
5.  * @param array $rules 
6.  
7.  *   CSS规则的数组形式为： 
8.  
9.  *   array('selector'=>array('property' => 'value')).  
10.  
11.  *   还支持选择器 
12.  
13.  *   嵌套示例： 
14.  
15.  *   array('selector' => array('selector'=>array('property' => 'value'))). 
16.  
17.  * 
18.  
19.  * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。 
20.  
21.  */ 
22.  
23. function css_array_to_css($rules, $indent = 0) { 
24.  
25.     $css = ''; 
26.  
27.     $prefix = str_repeat('  ', $indent); 
28.  
29.     foreach ($rules as $key => $value) { 
30.  
31.         if (is_array($value)) { 
32.  
33.             $selector = $key; 
34.  
35.             $properties = $value; 
36.  
37.             $css .= $prefix . "$selector {/n"; 
38.  
39.             $css .= $prefix . css_array_to_css($properties, $indent + 1); 
40.  
41.             $css .= $prefix . "}/n"; 
42.  
43.         } else { 
44.  
45.             $property = $key; 
46.  
47.             $css .= $prefix . "$property: $value;/n"; 
48.  
49.         } 
50.  
51.     } 
52.  
53.     return $css; 
54.  
55. } 
56.  
57. //调用css_array_to_css()函数转换 
58.  
59. //code 
60.  
61. ?> 

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

2、使用函数

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

●　转换为CSS：

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

1. $stylesheet = array( 
2.  
3.     "body" => array( 
4.  
5.         "margin" => "0", 
6.  
7.         "font-size" => "1rem", 
8.  
9.         "font-weight" => 400, 
10.  
11.         "line-height" => 1.5, 
12.  
13.         "color" => "#212529", 
14.  
15.         "text-align" => "left", 
16.  
17.         "background-color" => "#fff" 
18.  
19.     ), 
20.  
21.     ".form-control" => array( 
22.  
23.         "display" => "block", 
24.  
25.         "width" => "100%!important", 
26.  
27.         "font-size" => "1em", 
28.  
29.         "background-color" => "#fff", 
30.  
31.         "border-radius" => ".25rem" 
32.  
33.     ) 
34.  
35. ); 
36.  
37. echo(css_array_to_css($stylesheet)); 

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

1. body { 
2.  
3.   margin: 0; 
4.  
5.   font-size: 1rem; 
6.  
7.   font-weight: 400; 
8.  
9.   line-height: 1.5; 
10.  
11.   color: #212529; 
12.  
13.   text-align: left; 
14.  
15.   background-color: #fff; 
16.  
17. } 
18.  
19. .form-control { 
20.  
21.   display: block; 
22.  
23.   width: 100%!important; 
24.  
25.   font-size: 1em; 
26.  
27.   background-color: #fff; 
28.  
29.   border-radius: .25rem; 
30.  
31. } 

●　转换为SASS / SCSS：

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

1. $sass = array( 
2.  
3.     "nav" => array( 
4.  
5.         "ul" => array( 
6.  
7.             "margin" => 0, 
8.  
9.             "padding" => 0, 
10.  
11.             "list-style" => "none" 
12.  
13.         ), 
14.  
15.         "li" => array( 
16.  
17.             "display" => "inline-block" 
18.  
19.         ), 
20.  
21.         "a" => array( 
22.  
23.             "display" => "block", 
24.  
25.             "padding" => "6px 12px", 
26.  
27.             "text-decoration" => "none" 
28.  
29.         ) 
30.  
31.     ) 
32.  
33. ); 
34.  
35. echo css_array_to_css($sass); 

上一个代码段将输出以下SASS代码：

1. nav { 
2.  
3.   ul { 
4.  
5.       margin: 0; 
6.  
7.       padding: 0; 
8.  
9.       list-style: none; 
10.  
11.   } 
12.  
13.   li { 
14.  
15.       display: inline-block; 
16.  
17.   } 
18.  
19.   a { 
20.  
21.       display: block; 
22.  
23.       padding: 6px 12px; 
24.  
25.       text-decoration: none; 
26.  
27.   } 
28.  
29. } 

●　转换为LESS：

与SASS的工作方式相同，我们也可以使用LESS编写复杂的规则：

1. $less = array( 
2.  
3.     "@nice-blue" => "#5B83AD", 
4.  
5.     "@light-blue" => "@nice-blue + #111", 
6.  
7.     "#header" => array( 
8.  
9.         "color" => "@light-blue" 
10.  
11.     ), 
12.  
13.     ".component" => array( 
14.  
15.         "width" => "300px", 
16.  
17.         "@media (min-width: 768px)" => array( 
18.  
19.             "width" => "600px", 
20.  
21.             "@media (min-resolution: 192dpi)" => array( 
22.  
23.                 "background-image" => "url(/img/retina2x.png)" 
24.  
25.             ) 
26.  
27.         ), 
28.  
29.         "@media (min-width: 1280px)" => array( 
30.  
31.             "width" => "800px" 
32.  
33.         ) 
34.  
35.     ) 
36.  
37. ); 
38.  
39. echo css_array_to_css($less); 

上一个代码段将输出以下LESS代码：

1. @nice-blue: #5B83AD; 
2.  
3. @light-blue: @nice-blue + #111; 
4.  
5. #header { 
6.  
7.   color: @light-blue; 
8.  
9. } 
10.  
11. .component { 
12.  
13.   width: 300px; 
14.  
15.   @media (min-width: 768px) { 
16.  
17.     width: 600px; 
18.  
19.     @media (min-resolution: 192dpi) { 
20.  
21.           background-image: url(/img/retina2x.png); 
22.  
23.     } 
24.  
25.   } 
26.  
27.   @media (min-width: 1280px) { 
28.  
29.       width: 800px; 
30.  
31.   } 
32.  
33. }