將嵌套PHP數(shù)組轉(zhuǎn)換為CSS規(guī)則的方法

這篇文章主要介紹將嵌套PHP數(shù)組轉(zhuǎn)換為CSS規(guī)則的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

應(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、編寫關(guān)聯(lián)數(shù)組轉(zhuǎn)換為css字符串的函數(shù)

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

<?php
/**
 * @param array $rules
 *   CSS規(guī)則的數(shù)組形式為：
 *   array('selector'=>array('property' => 'value')). 
 *   還支持選擇器
 *   嵌套示例：
 *   array('selector' => array('selector'=>array('property' => 'value'))).
 *
 * @return 字符串一個(gè)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
?>

說(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ī)則，媒體查詢，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));

上一個(gè)代碼段將輸出以下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ī)則中嵌套多個(gè)規(guī)則，這允許我們?yōu)镾ASS生成有效的語(yǔ)法：

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

上一個(gè)代碼段將輸出以下SASS代碼：

nav {
  ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  li {
      display: inline-block;
  }
  a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
  }
}

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

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

上一個(gè)代碼段將輸出以下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數(shù)組轉(zhuǎn)換為CSS規(guī)則的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！