如何將巢狀的PHP陣列轉換為CSS規則？ （程式碼範例）

應用程式的許多方面都可以自動化，例如我們可以使用某些PHP程式碼（如使用陣列）來產生樣式表。那麼如何實現？以下這篇文章就來帶大家了解如何將巢狀的PHP陣列轉換為CSS規則，並以字串的形式顯示，希望對大家有幫助。

下面我們就來看看將巢狀的關聯陣列轉換為CSS字元的方法。

1、編寫關聯陣列轉換為css字串的函數

#要在PHP中將陣列轉換為CSS字串（在SASS或LESS的情況下使用規則或簡單變數），我們將使用以下函數：

<?php
/**
 * @param array $rules
 *   CSS规则的数组形式为：
 *   array(&#39;selector&#39;=>array(&#39;property&#39; => &#39;value&#39;)). 
 *   还支持选择器
 *   嵌套示例：
 *   array(&#39;selector&#39; => array(&#39;selector&#39;=>array(&#39;property&#39; => &#39;value&#39;))).
 *
 * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。
 */
function css_array_to_css($rules, $indent = 0) {
    $css = &#39;&#39;;
    $prefix = str_repeat(&#39;  &#39;, $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中文網其他相關文章！