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

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

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

 ?php * @param array $rules * CSS規(guī)則的數(shù)組形式為： * array( selector = array( property = value )).  * 還支持選擇器 * 嵌套示例： * array( selector = array( selector = array( property = value ))). * @return 字符串一個CSS規(guī)則字符串。它不包含在 style 標(biāo)簽中。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;//調(diào)用css_array_to_css()函數(shù)轉(zhuǎn)換//code? 

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

2、使用函數(shù)

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

● 轉(zhuǎn)換為CSS：

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

$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規(guī)則：

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

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

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

$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;}

● 轉(zhuǎn)換為LESS：

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

$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;}

相關(guān)視頻教程推薦：《PHP教程》

以上就是本篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)有所幫助。更多精彩內(nèi)容大家可以關(guān)注php 相關(guān)教程欄目?。?！

以上就是如何將嵌套的PHP數(shù)組轉(zhuǎn)換為CSS規(guī)則？（代碼示例）的詳細(xì)內(nèi)容，PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。