Wie konvertiert man verschachtelte PHP-Arrays in CSS-Regeln? (Codebeispiel)

Viele Aspekte der Anwendung können automatisiert werden, zum Beispiel können wir PHP-Code (z. B. die Verwendung von Arrays) verwenden, um Stylesheets zu generieren. Wie kann man es erreichen? Der folgende Artikel zeigt Ihnen, wie Sie verschachtelte PHP-Arrays in CSS-Regeln umwandeln und in Form von Strings anzeigen. Ich hoffe, dass er für Sie hilfreich ist.

Sehen wir uns an, wie man verschachtelte assoziative Arrays in CSS-Zeichen umwandelt.

1. Schreiben Sie eine Funktion zum Konvertieren eines assoziativen Arrays in einen CSS-String

So konvertieren Sie ein Array in einen CSS-String in PHP (in SASS oder im Fall von LESS mit Regeln oder einfachen Variablen) verwenden wir die folgende Funktion:

<?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
?>

Beschreibung: Diese Funktion erwartet grundsätzlich als erstes Argument ein Array, das Regeln oder einfache Eigenschaften von CSS enthält, das kein Array ist Jeder key => value; wird als key : value; dargestellt, und wenn der Wert des Schlüssels ein Array ist, wird die Regel für CSS eingeführt.

2. Verwenden Sie die Funktion

Wie in der obigen Funktionsbeschreibung erwähnt, gibt sie ein CSS-Zeichen aus einem Array mit der angegebenen Regelzeichenfolge zurück. Diese Funktion funktioniert gut mit reinen CSS-Regeln, Medienabfragen, SASS und LESS, solange die Struktur des Arrays gültig ist. Zum Beispiel:

● In CSS konvertieren:

Fügen Sie den folgenden Code nach der Funktion css_array_to_css() hinzu:

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

Das vorherige Code-Snippet wird ausgegeben die folgenden CSS-Regeln:

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

● Konvertierung zu SASS/SCSS:

Aufgrund der rekursiven Implementierung ist es möglich, mehrere Regeln innerhalb einer Regel zu verschachteln, was ermöglicht es uns, eine gültige Syntax zu generieren:

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

Das vorherige Snippet gibt den folgenden SASS-Code aus:

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

● In LESS konvertieren:

Funktioniert Auf die gleiche Weise wie SASS können wir auch LESS verwenden, um komplexe Regeln zu schreiben:

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

Das vorherige Codesegment gibt den folgenden LESS-Code aus:

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

Empfohlene verwandte Video-Tutorials: „PHP Tutorial"

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie konvertiert man verschachtelte PHP-Arrays in CSS-Regeln? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!