應(yīng)用程序的許多方面都可以自動(dòng)化，例我們可以使用某些PHP代碼（如使用數(shù)組）來(lái)生成樣式表。那么如何實(shí)現(xiàn)？下面本篇文章就來(lái)帶大家了解一下如何將嵌套的PHP數(shù)組轉(zhuǎn)換為CSS規(guī)則，并以字符串的形式顯示，希望對(duì)大家有所幫助。

下面我們就來(lái)看看將嵌套的關(guān)聯(lián)數(shù)組轉(zhuǎn)換為CSS字符的方法。

1、編寫(xiě)關(guān)聯(lián)數(shù)組轉(zhuǎn)換為css字符串的函數(shù)

要在PHP中將數(shù)組轉(zhuǎn)換為CSS字符串（在SASS或LESS的情況下使用規(guī)則或簡(jiǎn)單變量），我們將使用以下函數(shù)：

1. <?php 
2.  
3. /** 
4.  
5.  * @param array $rules 
6.  
7.  *   CSS規(guī)則的數(shù)組形式為： 
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 字符串一個(gè)CSS規(guī)則字符串。它不包含在<style>標(biāo)簽中。 
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. //調(diào)用css_array_to_css()函數(shù)轉(zhuǎn)換 
58.  
59. //code 
60.  
61. ?> 

說(shuō)明：該函數(shù)基本上期望作為第一個(gè)參數(shù)包含CSS的規(guī)則或簡(jiǎn)單屬性的數(shù)組，其中不是數(shù)組的每個(gè)key =>value;都將表示為key : value;，如果鍵的值是數(shù)組，則規(guī)則為css將被引入。

2、使用函數(shù)

正如上述函數(shù)說(shuō)明中所提到的，它從具有指定規(guī)則的數(shù)組中返回一個(gè)CSS字符串。只要數(shù)組的結(jié)構(gòu)有效，該函數(shù)就可以正常用于純CSS規(guī)則，媒體查詢(xún)，SASS和LESS。例如：

●　轉(zhuǎn)換為CSS：

在 css_array_to_css()函數(shù)后添加以下代碼：

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)); 

上一個(gè)代碼段將輸出以下CSS規(guī)則：

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. } 

●　轉(zhuǎn)換為SASS / SCSS：

由于遞歸實(shí)現(xiàn)，將能夠在規(guī)則中嵌套多個(gè)規(guī)則，這允許我們?yōu)镾ASS生成有效的語(yǔ)法：

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); 

上一個(gè)代碼段將輸出以下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. } 

●　轉(zhuǎn)換為L(zhǎng)ESS：

與SASS的工作方式相同，我們也可以使用LESS編寫(xiě)復(fù)雜的規(guī)則：

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); 

上一個(gè)代碼段將輸出以下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. }