應用程式的許多方面都可以自動化，例如我們可以使用某些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;
}
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中文網其他相關文章！
