將嵌套PHP數組轉換為CSS規則的方法

這篇文章主要介紹將嵌套PHP數組轉換為CSS規則的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

應用程序的許多方面都可以自動化，例我們可以使用某些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數組轉換為CSS規則的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！